59 lines
No EOL
1.7 KiB
TypeScript
59 lines
No EOL
1.7 KiB
TypeScript
import { createSignal } from "solid-js";
|
|
import { debounce } from "@solid-primitives/scheduled";
|
|
import { Editor, useEditor } from "~/features/editor";
|
|
import css from './editor.module.css';
|
|
|
|
const tempVal = `
|
|
# Header
|
|
|
|
this is **a string** that contains bolded text
|
|
|
|
this is *a string* that contains italicized text
|
|
|
|
> Dorothy followed her through many of the beautiful rooms in her castle.
|
|
|
|
> #### The quarterly results look great!
|
|
>
|
|
> - Revenue was off the chart.
|
|
> - Profits were higher than ever.
|
|
>
|
|
> > The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
|
|
>
|
|
> *Everything* is going according to **plan**.
|
|
|
|
- First item
|
|
- Second item
|
|
- Third item
|
|
- Fourth item
|
|
`;
|
|
|
|
export default function Formatter(props: {}) {
|
|
const [value, setValue] = createSignal(tempVal);
|
|
|
|
const onInput = debounce((e: InputEvent) => {
|
|
setValue((e.target! as HTMLTextAreaElement).value);
|
|
}, 300);
|
|
|
|
return <div class={css.root}>
|
|
<textarea oninput={onInput} title="markdown">{value()}</textarea>
|
|
|
|
<Editor value={value()} oninput={setValue}>
|
|
<SearchAndReplace />
|
|
</Editor>
|
|
</div>;
|
|
}
|
|
|
|
function SearchAndReplace() {
|
|
const { mutate, source } = useEditor();
|
|
const [replacement, setReplacement] = createSignal('');
|
|
|
|
const replace = () => {
|
|
mutate(text => text.replaceAll(source.query, replacement()));
|
|
};
|
|
|
|
return <form class={css.search}>
|
|
<input type="search" title="editor-search" placeholder="search for" oninput={e => source.query = e.target.value} />
|
|
<input type="search" title="editor-replace" placeholder="replace with" oninput={e => setReplacement(e.target.value)} />
|
|
<button onclick={() => replace()}>replace</button>
|
|
</form>;
|
|
}; |