Zenn

, document.getElementById("main")); 93 | -------------------------------------------------------------------------------- /demo/markdown.txt: -------------------------------------------------------------------------------- 1 | This page lists the Markdown notation for React Split MDE. 2 | 3 | # Heading 4 | ``` 5 | # Heading1 6 | ## Heading2 7 | ### Heading3 8 | #### Heading4 9 | ``` 10 | 11 | # List 12 | ``` 13 | - Hello! 14 | - Hola! 15 | - Bonjour! 16 | * Hi! 17 | ``` 18 | - Hello! 19 | - Hola! 20 | - Bonjour! 21 | * Hi! 22 | 23 | Use `*` or `-` for items in the list. 24 | 25 | ### Ordered List 26 | ``` 27 | 1. First 28 | 2. Second 29 | ``` 30 | 1. First 31 | 2. Second 32 | 33 | 34 | 35 | # Image 36 | ``` 37 | ![alt text](https://path_to_the_image) 38 | ``` 39 | ![alt text](https://storage.googleapis.com/zenn-user-upload/gxnwu3br83nsbqs873uibiy6fd43) 40 | 41 | ### Specify the width of the image 42 | 43 | If the image is too large, you can specify the width of the image in px units by writing `= ○○ x` with a half-width space after the URL. 44 | 45 | ``` 46 | ![alt text](https://path_to_the_image =250x) 47 | ``` 48 | ![alt text](https://storage.googleapis.com/zenn-user-upload/gxnwu3br83nsbqs873uibiy6fd43 =250x) 49 | 50 | 51 | # Text link 52 | ``` 53 | [anchor text](URL) 54 | ``` 55 | [anchor text](https://zenn.dev) 56 | You can also insert with the shortcut `Ctrl + K`. 57 | 58 | # Table 59 | ``` 60 | | Head | Head | Head | 61 | | ---- | ---- | ---- | 62 | | Text | Text | Text | 63 | | Text | Text | Text | 64 | ``` 65 | | Head | Head | Head | 66 | | ---- | ---- | ---- | 67 | | Text | Text | Text | 68 | | Text | Text | Text | 69 | 70 | 71 | 72 | # Code Block 73 | 74 | Code can be inserted as a block by sandwiching it with `` `. If you specify the language as shown below, the decoration (syntax highlighting) will be applied to the code. 75 | 76 | > \```js 77 | > 78 | > \``` 79 | 80 | ```js 81 | const great = () => { 82 | console.log("Awesome") 83 | } 84 | ``` 85 | 86 | # Mathmatical Expression 87 | 88 | Supports mathematical expression display by ** KaTeX **. 89 | 90 | ### Insert a block of formulas 91 | 92 | A block of formulas is inserted by inserting the description between `$$`. 93 | 94 | ``` 95 | $$ 96 | e^{i\theta} = \cos\theta + i\sin\theta 97 | $$ 98 | ``` 99 | 100 | It will be displayed as follows. 101 | 102 | $$ 103 | e^{i\theta} = \cos\theta + i\sin\theta 104 | $$ 105 | 106 | :::message 107 | Before and After `$$`, space should be placed, otherwise it won't be shown correctly. 108 | ::: 109 | 110 | ### Insert formula inline 111 | 112 | You can include formulas inline by sandwiching them with one `$` such as `$a\ne0$`. For example, $a\ne0$. 113 | 114 | # Quote 115 | ``` 116 | > Quote 117 | > Quote 118 | ``` 119 | 120 | > Quote 121 | > Quote 122 | 123 | # Annotation 124 | 125 | If you specify an annotation, its contents will be displayed at the bottom of the page. 126 | ``` 127 | 128 | An example of a footnote [^ 1]. You can also write inline ^ [Footnote Content 2]. 129 | 130 | [^1]: footnote1 131 | ``` 132 | 133 | If you specify an annotation, its contents will be displayed at the bottom of the page. 134 | 135 | [^1]: footnote1 136 | 137 | 138 | # Separator 139 | ``` 140 | ----- 141 | ``` 142 | ----- 143 | 144 | 145 | # Inline Style 146 | ``` 147 | *Italic* 148 | **Bold** 149 | ~~Strikethrough~~ 150 | Insert `code` inline 151 | ``` 152 | *Italic* 153 | **Bold** 154 | ~~Strikethrough~~ 155 | Insert `code` inline 156 | 157 | 158 | 159 | # React Split MDE original notation 160 | 161 | ### Message 162 | 163 | ``` 164 | :::message 165 | message here 166 | ::: 167 | ``` 168 | 169 | 170 | :::message 171 | message here 172 | ::: 173 | 174 | ``` 175 | :::message alert 176 | alert message here 177 | ::: 178 | ``` 179 | 180 | :::message alert 181 | alert message here 182 | ::: 183 | 184 | 185 | ### Accordion（Toggle） 186 | 187 | ``` 188 | :::details title 189 | contents here 190 | ::: 191 | ``` 192 | 193 | :::details title 194 | contents here 195 | ::: 196 | 197 | 198 | It's comfusing, but it's not "detail" but "details". 199 | 200 | # Embedding external content 201 | 202 | 203 | ### Twitter 204 | 205 | ``` 206 | @[tweet](URL) 207 | ``` 208 | 209 | Please note that it is "tweet", not "twitter". 210 | 211 | @[tweet](https://twitter.com/catnose99/status/1309382877272879110) 212 | 213 | 214 | ### YouTube 215 | 216 | ``` 217 | @[youtube](video ID) 218 | ``` 219 | 220 | Enter a combination of alphanumeric characters in the URL. 221 | For example, if the URL is `https://youtube.com/watch?v=ApXoWvfEYVU`, 222 | specify `@[youtube](ApXoWvfEYVU)`. 223 | 224 | @[youtube](ApXoWvfEYVU) 225 | 226 | ### CodePen 227 | 228 | ``` 229 | @[codepen](URL) 230 | ``` 231 | 232 | The default display tab can be changed by specifying a query like `pageURL?default-tab=html,css`. 233 | 234 | 235 | ### SlideShare 236 | ``` 237 | @[slideshare](Slide key) 238 | ``` 239 | Enter the `◯◯` part of `...embed_code/key/○○...` included in the embedded iframe of SlideShare. 240 | 241 | 242 | ### SpeakerDeck 243 | ``` 244 | @[speakerdeck](Slide ID) 245 | ``` 246 | Enter the value of `data-id` included in the embed code obtained by SpeakerDeck. 247 | 248 | ### JSFiddle 249 | 250 | ``` 251 | @[jsfiddle](URL) 252 | ``` 253 | -------------------------------------------------------------------------------- /demo/worker.ts: -------------------------------------------------------------------------------- 1 | const ctx: Worker = self as any; 2 | ctx.Prism = {} 3 | ctx.Prism.disableWorkerMessageHandler = true; 4 | 5 | // you have to disable prism worker handle option first 6 | import markdownHTML, { enablePreview } from "zenn-markdown-html"; 7 | 8 | enablePreview(); 9 | // Respond to message from parent thread 10 | ctx.addEventListener("message", (event) => { 11 | const result = markdownHTML(event.data); 12 | ctx.postMessage(result); 13 | }); 14 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | Zenn 12 | 13 | 14 | 34 |

35 |

React Split MDE

36 |

37 |

38 | 39 | 40 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-split-mde", 3 | "version": "0.3.4", 4 | "description": "", 5 | "main": "./lib/index.js", 6 | "types": "./lib/index.d.ts", 7 | "engines": { 8 | "node": "16.x" 9 | }, 10 | "scripts": { 11 | "dev": "webpack-dev-server --config webpack.config.js --host 0.0.0.0 --port 3031", 12 | "build": "webpack --mode production && cp index.html ./dist/index.html", 13 | "test": "echo \"Error: no test specified\" && exit 1", 14 | "lint": "eslint 'src/**/**.{ts,tsx}' --fix", 15 | "clean": "rm -rf ./lib", 16 | "tsc": "npm run clean && tsc --project ./tsconfig.prod.json", 17 | "patch": "npm run tsc && npm version patch && npm publish && npm run clean", 18 | "minor": "npm run tsc && npm version minor && npm publish && npm run clean", 19 | "major": "npm run tsc && npm version minor && npm publish && npm run clean" 20 | }, 21 | "keywords": [], 22 | "author": "steelydylan", 23 | "license": "MIT", 24 | "dependencies": { 25 | "@types/highlight.js": "^9.12.4", 26 | "eventmit": "^1.1.0", 27 | "highlight.js": "^10.2.0", 28 | "morphdom": "^2.6.1", 29 | "react-textarea-autosize": "^8.3.0", 30 | "use-eventmit": "^1.0.3", 31 | "xss": "^1.0.8" 32 | }, 33 | "peerDependencies": { 34 | "zenn-markdown-html": "^0.1.70" 35 | }, 36 | "devDependencies": { 37 | "@types/react": "^16.9.35", 38 | "@types/react-dom": "^16.9.8", 39 | "@typescript-eslint/eslint-plugin": "^4.2.0", 40 | "@typescript-eslint/parser": "^4.2.0", 41 | "css-loader": "^4.3.0", 42 | "eslint": "^7.11.0", 43 | "eslint-config-airbnb": "^18.0.1", 44 | "eslint-config-prettier": "^6.8.0", 45 | "eslint-import-resolver-typescript": "^2.3.0", 46 | "eslint-plugin-import": "^2.19.1", 47 | "eslint-plugin-jsx-a11y": "^6.2.3", 48 | "eslint-plugin-prettier": "^3.1.2", 49 | "eslint-plugin-react": "^7.21.4", 50 | "null-loader": "^4.0.0", 51 | "p-event": "^4.2.0", 52 | "prettier": "^2.0.5", 53 | "raw-loader": "^4.0.1", 54 | "react": "^16.13.1", 55 | "react-dom": "^16.13.1", 56 | "style-loader": "^1.2.1", 57 | "ts-loader": "^7.0.4", 58 | "typescript": "^4.0.3", 59 | "webpack": "^4.43.0", 60 | "webpack-cli": "^3.3.11", 61 | "webpack-dev-server": "^3.11.0", 62 | "worker-loader": "^3.0.3", 63 | "zenn-markdown-html": "^0.1.70" 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/@types/dom.d.ts: -------------------------------------------------------------------------------- 1 | interface HTMLElement { 2 | createTextRange: () => any; 3 | selectionStart: any; 4 | selectionEnd: any; 5 | } 6 | 7 | interface Window { 8 | clipboardData: any; 9 | } 10 | 11 | interface Document { 12 | selection: any; 13 | } 14 | -------------------------------------------------------------------------------- /src/@types/xss.d.ts: -------------------------------------------------------------------------------- 1 | declare module "xss" { 2 | export type Option = { 3 | whiteList?: Record; 4 | stripIgnoreTag?: boolean; 5 | stripIgnoreTagBody?: string[]; 6 | }; 7 | const xss: (html: string, option?: Option) => string; 8 | // @ts-ignore 9 | export = xss; 10 | } 11 | -------------------------------------------------------------------------------- /src/commands/bulletList.ts: -------------------------------------------------------------------------------- 1 | import { Command, CommandOption, EnterKey, TabKey } from "../types"; 2 | import { 3 | insertTextAtCursor, 4 | insertTextAtCursorFirstLine, 5 | removeTextAtFirstLine, 6 | } from "../utils"; 7 | 8 | const generateSpace = (count: number) => { 9 | let i = 0; 10 | let text = ""; 11 | while (i < count) { 12 | text += " "; 13 | i += 1; 14 | } 15 | return text; 16 | }; 17 | 18 | export const bulletList: Command = (target, option) => { 19 | const { lineAll, line } = option; 20 | const lineWithoutSpace = lineAll.replace(/^(\s*)/g, ""); 21 | const spaces = lineAll.match(/^(\s*)/); 22 | let spaceLength = 0; 23 | if (option.composing) { 24 | return { stop: false, change: false }; 25 | } 26 | if (spaces.length) { 27 | const [_, space] = spaces; 28 | if (space) { 29 | spaceLength = space.length; 30 | } 31 | } 32 | const startWithHyphen = lineWithoutSpace.startsWith("-"); 33 | const startWithAsterisk = lineWithoutSpace.startsWith("*"); 34 | if (!startWithHyphen && !startWithAsterisk) { 35 | return { stop: false, change: false }; 36 | } 37 | if (lineWithoutSpace.charAt(1) !== " ") { 38 | return { stop: false, change: false }; 39 | } 40 | if (option.code === EnterKey) { 41 | if (option.metaKey || option.ctrlKey) { 42 | return { stop: true, change: false }; 43 | } 44 | if (line.length === 0) { 45 | return { stop: false, change: true }; 46 | } 47 | if (lineWithoutSpace.length > 2) { 48 | const text = startWithHyphen 49 | ? `\n${generateSpace(spaceLength)}- ` 50 | : `\n${generateSpace(spaceLength)}* `; 51 | insertTextAtCursor(target, text); 52 | target.setSelectionRange( 53 | option.start + text.length, 54 | option.start + text.length 55 | ); 56 | return { stop: true, change: true }; 57 | } 58 | if (lineWithoutSpace === "- " || lineWithoutSpace === "* ") { 59 | removeTextAtFirstLine(target, lineAll.length); 60 | insertTextAtCursor(target, "\n"); 61 | return { stop: false, change: true }; 62 | } 63 | } 64 | if (option.code === TabKey && option.shiftKey) { 65 | removeTextAtFirstLine(target, 2); 66 | return { stop: true, change: true }; 67 | } 68 | if (option.code === TabKey) { 69 | const text = " "; 70 | insertTextAtCursorFirstLine(target, text); 71 | target.setSelectionRange( 72 | option.start + text.length, 73 | option.start + text.length 74 | ); 75 | return { stop: true, change: true }; 76 | } 77 | return { stop: false, change: false }; 78 | }; 79 | -------------------------------------------------------------------------------- /src/commands/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./bulletList"; 2 | export * from "./orderedList"; 3 | export * from "./redo"; 4 | export * from "./undo"; 5 | // export * from "./linebreak"; 6 | -------------------------------------------------------------------------------- /src/commands/orderedList.ts: -------------------------------------------------------------------------------- 1 | import { Command, EnterKey, TabKey } from "../types"; 2 | import { 3 | insertTextAtCursor, 4 | insertTextAtCursorFirstLine, 5 | removeTextAtFirstLine, 6 | } from "../utils"; 7 | 8 | const generateSpace = (count: number) => { 9 | let i = 0; 10 | let text = ""; 11 | while (i < count) { 12 | text += " "; 13 | i += 1; 14 | } 15 | return text; 16 | }; 17 | 18 | export const orderedList: Command = (target, option) => { 19 | const { lineAll, line } = option; 20 | const lineWithoutSpace = lineAll.replace(/^(\s*)/g, ""); 21 | const spaces = lineAll.match(/^(\s*)/); 22 | let spaceLength = 0; 23 | if (option.composing) { 24 | return { stop: false, change: false }; 25 | } 26 | if (spaces.length) { 27 | const [_, space] = spaces; 28 | if (space) { 29 | spaceLength = space.length; 30 | } 31 | } 32 | if (!/^(\d+)\./.test(lineWithoutSpace)) { 33 | return { stop: false, change: false }; 34 | } 35 | if (option.code === EnterKey) { 36 | if (option.ctrlKey || option.metaKey) { 37 | return { stop: true, change: false }; 38 | } 39 | if (line.length === 0) { 40 | return { stop: false, change: true }; 41 | } 42 | const [_, number] = lineWithoutSpace.match(/^(\d+)/); 43 | if (lineWithoutSpace.length - number.length <= 2) { 44 | removeTextAtFirstLine(target, lineAll.length); 45 | insertTextAtCursor(target, "\n"); 46 | return { stop: false, change: true }; 47 | } 48 | const text = `\n${generateSpace(spaceLength)}${parseInt(number, 10) + 1}. `; 49 | insertTextAtCursor(target, text); 50 | target.setSelectionRange( 51 | option.start + text.length, 52 | option.start + text.length 53 | ); 54 | return { stop: true, change: true }; 55 | } 56 | if (option.code === EnterKey && lineWithoutSpace.length === 2) { 57 | removeTextAtFirstLine(target, lineAll.length); 58 | insertTextAtCursor(target, "\n"); 59 | } 60 | if (option.code === TabKey && option.shiftKey) { 61 | removeTextAtFirstLine(target, 2); 62 | return { stop: true, change: true }; 63 | } 64 | if (option.code === TabKey) { 65 | const text = " "; 66 | insertTextAtCursorFirstLine(target, text); 67 | target.setSelectionRange( 68 | option.start + text.length, 69 | option.start + text.length 70 | ); 71 | return { stop: true, change: true }; 72 | } 73 | return { stop: false, change: false }; 74 | }; 75 | -------------------------------------------------------------------------------- /src/commands/redo.ts: -------------------------------------------------------------------------------- 1 | import { Command, CommandOption } from "../types"; 2 | 3 | export const redo: Command = ( 4 | _, 5 | { code, metaKey, ctrlKey, shiftKey, emit } 6 | ) => { 7 | if (code === "z" && (metaKey || ctrlKey) && shiftKey) { 8 | emit({ type: "redo" }); 9 | return { stop: true, change: false }; 10 | } 11 | }; 12 | -------------------------------------------------------------------------------- /src/commands/undo.ts: -------------------------------------------------------------------------------- 1 | import { Command } from "../types"; 2 | 3 | export const undo: Command = ( 4 | _, 5 | { code, metaKey, ctrlKey, shiftKey, emit } 6 | ) => { 7 | if (code === "z" && (metaKey || ctrlKey) && !shiftKey) { 8 | emit({ type: "undo" }); 9 | return { stop: true, change: false }; 10 | } 11 | }; 12 | -------------------------------------------------------------------------------- /src/components/Editor.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import { Preview } from "./Preview"; 3 | import { Textarea } from "./Textarea"; 4 | import * as defaultCommands from "../commands"; 5 | import { Command } from "../types"; 6 | import { useDebounce } from "../hooks/debounce"; 7 | 8 | type Props = { 9 | commands?: Record; 10 | previewClassName?: string; 11 | textareaClassName?: string; 12 | previewCallback?: Record any>; 13 | parser: (text: string) => Promise; 14 | value: string; 15 | onChange?: (value: string) => void; 16 | psudoMode?: boolean; 17 | debounceTime?: number; 18 | scrollSync?: boolean; 19 | placeholder?: string; 20 | }; 21 | 22 | export const Editor: React.FC = ({ 23 | commands = defaultCommands, 24 | textareaClassName, 25 | previewClassName = "react-split-mde-preview", 26 | previewCallback = {}, 27 | parser, 28 | value, 29 | onChange, 30 | psudoMode = false, 31 | debounceTime = 300, 32 | scrollSync = true, 33 | placeholder = "", 34 | }) => { 35 | const ref = useRef(null); 36 | const handleTextareaChange = React.useCallback((text: string) => { 37 | if (onChange) { 38 | onChange(text); 39 | } 40 | }, []); 41 | 42 | const debouncedValue = useDebounce(value, debounceTime); 43 | 44 | return ( 45 |

46 |

47 |

57 |       </div>
58 |       <div className="react-split-mde-box">
59 |         <Preview
60 |           value={debouncedValue}
61 |           className={previewClassName}
62 |           callback={previewCallback}
63 |           parser={parser}
64 |         />
65 |       </div>
66 |     </div>
67 |   );
68 | };
69 |

--------------------------------------------------------------------------------
/src/components/Preview.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import morphdom from "morphdom";
 3 | import { useSubscriber } from "../hooks";
 4 | 
 5 | type Props = {
 6 |   value: string;
 7 |   className?: string;
 8 |   parser: (text: string) => Promise<string>;
 9 |   callback: Record<string, (node: any) => any>;
10 | };
11 | 
12 | const buildScrollMap = (lineHeightMap: number[], target: HTMLElement) => {
13 |   const nonEmptyList: number[] = [];
14 |   const linesCount = lineHeightMap[lineHeightMap.length - 1];
15 |   const scrollMap: number[] = [];
16 |   for (let i = 0; i < linesCount; i += 1) {
17 |     scrollMap.push(-1);
18 |   }
19 |   nonEmptyList.push(0);
20 |   scrollMap[0] = 0;
21 |   const lines = target.querySelectorAll(".line");
22 |   const offset = target.scrollTop - target.offsetTop;
23 |   Array.from(lines).forEach((l: HTMLElement) => {
24 |     const { line } = l.dataset;
25 |     if (!line) {
26 |       return;
27 |     }
28 |     const index = lineHeightMap[parseInt(line, 10)];
29 |     if (index !== 0) {
30 |       nonEmptyList.push(index);
31 |     }
32 |     scrollMap[index] = Math.round(l.offsetTop + offset);
33 |   });
34 |   nonEmptyList.push(linesCount);
35 |   scrollMap[linesCount] = target.scrollHeight;
36 |   let pos = 0;
37 |   for (let i = 1; i < linesCount; i += 1) {
38 |     if (scrollMap[i] !== -1) {
39 |       pos += 1;
40 |       // eslint-disable-next-line no-continue
41 |       continue;
42 |     }
43 | 
44 |     const a = nonEmptyList[pos];
45 |     const b = nonEmptyList[pos + 1];
46 |     scrollMap[i] = Math.round(
47 |       (scrollMap[b] * (i - a) + scrollMap[a] * (b - i)) / (b - a)
48 |     );
49 |   }
50 |   return scrollMap;
51 | };
52 | 
53 | export const Preview: React.FC<Props> = ({
54 |   value,
55 |   className,
56 |   parser,
57 |   callback,
58 | }) => {
59 |   const ref = React.useRef<HTMLDivElement>(null);
60 | 
61 |   useSubscriber((event) => {
62 |     if (event.type !== "scroll") {
63 |       return;
64 |     }
65 |     const parent = ref.current.parentNode as HTMLElement;
66 |     if (event.remaining < 50) {
67 |       parent.scrollTo(
68 |         0,
69 |         parent.scrollHeight - parent.offsetHeight - event.remaining
70 |       );
71 |       return;
72 |     }
73 |     const scrollMap = buildScrollMap(event.lineHeightMap, ref.current);
74 |     const posTo = scrollMap[event.lineNo];
75 |     parent.scrollTo(0, posTo);
76 |   });
77 | 
78 |   React.useEffect(() => {
79 |     (async () => {
80 |       try {
81 |         const html = await parser(value);
82 |         morphdom(
83 |           ref.current,
84 |           `<div class="${className}">${html}</div>`,
85 |           callback
86 |         );
87 |       } catch (e) {
88 |         console.error(e);
89 |       }
90 |     })();
91 |   }, [value]);
92 | 
93 |   return <div ref={ref} className={className} />;
94 | };
95 |

--------------------------------------------------------------------------------
/src/components/SafeHTML.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import xss from "xss";
 3 | 
 4 | type Props = {
 5 |   ref?: React.MutableRefObject<HTMLElement>;
 6 |   html: string;
 7 |   tagName: string;
 8 |   className?: string;
 9 |   options?: xss.Option;
10 |   sanitize?: boolean;
11 | };
12 | 
13 | export const SafeHTML = React.forwardRef(
14 |   ({ tagName, html, className, options, sanitize = true }: Props, ref) => {
15 |     return React.createElement(tagName, {
16 |       className,
17 |       ref,
18 |       dangerouslySetInnerHTML: { __html: sanitize ? xss(html, options) : html },
19 |     });
20 |   }
21 | );
22 |

--------------------------------------------------------------------------------
/src/components/Textarea.tsx:
--------------------------------------------------------------------------------
  1 | import React, {
  2 |   createRef,
  3 |   useCallback,
  4 |   useEffect,
  5 |   useImperativeHandle,
  6 |   useMemo,
  7 |   useRef,
  8 |   useState,
  9 | } from "react";
 10 | import TextareaAutosize from "react-textarea-autosize";
 11 | import { Command, EnterKey } from "../types";
 12 | import {
 13 |   getCurrentLine,
 14 |   getCurrentLineAll,
 15 |   insertTextAtCursor,
 16 | } from "../utils";
 17 | import { SafeHTML } from "./SafeHTML";
 18 | import { useEmitter, useSubscriber } from "../hooks";
 19 | import { UndoRedo } from "../utils/undo-redo";
 20 | import { decorationCode } from "../decoration";
 21 | import { useDebounceCallback } from "../hooks/debounce";
 22 | 
 23 | type Props = {
 24 |   onChange: (value: string) => void;
 25 |   className?: string;
 26 |   commands: Record<string, Command>;
 27 |   value: string;
 28 |   psudoMode: boolean;
 29 |   scrollSync: boolean;
 30 |   placeholder?: string;
 31 |   autosize?: boolean;
 32 | };
 33 | 
 34 | const xssAllowOption = {
 35 |   whiteList: {
 36 |     span: ["class"],
 37 |   },
 38 | };
 39 | 
 40 | const buildLineHeightMap = (
 41 |   markdown: string,
 42 |   textarea: HTMLTextAreaElement
 43 | ) => {
 44 |   const div = document.createElement("div");
 45 |   div.classList.add("react-split-mde-psudo");
 46 |   div.style.position = "absolute";
 47 |   div.style.visibility = "hidden";
 48 |   div.style.height = "auto";
 49 |   const computedStyle = window.getComputedStyle(textarea);
 50 |   const lineHeightMap: number[] = [];
 51 |   let acc = 0;
 52 |   textarea.parentElement.appendChild(div);
 53 |   const lh = parseFloat(computedStyle.lineHeight);
 54 |   markdown.split("\n").forEach((str) => {
 55 |     lineHeightMap.push(acc);
 56 |     if (str.length === 0) {
 57 |       acc += 1;
 58 |       return;
 59 |     }
 60 |     div.innerText = str;
 61 |     const h = div.offsetHeight;
 62 |     acc += Math.round(h / lh);
 63 |   });
 64 |   textarea.parentElement.removeChild(div);
 65 |   lineHeightMap.push(acc);
 66 |   return lineHeightMap;
 67 | };
 68 | 
 69 | export const Textarea = React.forwardRef(
 70 |   (
 71 |     {
 72 |       onChange,
 73 |       commands,
 74 |       value: markdown,
 75 |       className,
 76 |       autosize = false,
 77 |       psudoMode = false,
 78 |       scrollSync = true,
 79 |       placeholder = "",
 80 |     }: Props,
 81 |     ref
 82 |   ) => {
 83 |     const [lineHeightMap, setLineHeightMap] = useState<number[]>([]);
 84 |     const composing = useRef(false);
 85 |     const htmlRef = useRef<HTMLTextAreaElement>();
 86 |     const oldScrollRef = useRef<number>(0);
 87 |     const historyManager = useRef(
 88 |       new UndoRedo({
 89 |         markdown,
 90 |         selectionStart: 0,
 91 |         selectionEnd: 0,
 92 |       })
 93 |     );
 94 |     const psudoRef = useMemo(() => createRef<HTMLPreElement>(), []);
 95 |     const emit = useEmitter();
 96 |     const handleTextareaScroll = useCallback(() => {
 97 |       const { offsetHeight, scrollHeight, scrollTop } = htmlRef.current;
 98 |       const computedStyle = window.getComputedStyle(htmlRef.current);
 99 |       const lineHeight = parseFloat(computedStyle.lineHeight);
100 |       const lineNo = Math.floor(scrollTop / lineHeight);
101 |       oldScrollRef.current = scrollTop;
102 |       if (psudoRef.current) {
103 |         psudoRef.current.scrollTo(0, scrollTop);
104 |       }
105 |       emit({
106 |         type: "scroll",
107 |         lineNo,
108 |         lineHeightMap,
109 |         remaining: scrollHeight - offsetHeight - scrollTop,
110 |       });
111 |     }, [lineHeightMap]);
112 | 
113 |     const handleTextChange = useCallback(
114 |       (e: React.ChangeEvent<HTMLTextAreaElement>) => {
115 |         e.target.scrollTo(0, oldScrollRef.current);
116 |         onChange(e.target.value);
117 |       },
118 |       []
119 |     );
120 | 
121 |     const undo = () => {
122 |       if (!historyManager.current.canUndo()) {
123 |         return;
124 |       }
125 |       historyManager.current.undo();
126 |       const {
127 |         markdown: undoMarkdown,
128 |         selectionStart,
129 |         selectionEnd,
130 |       } = historyManager.current.getValue();
131 |       htmlRef.current.value = undoMarkdown;
132 |       htmlRef.current.setSelectionRange(selectionStart, selectionEnd);
133 |       onChange(undoMarkdown);
134 |     };
135 | 
136 |     const redo = () => {
137 |       if (!historyManager.current.canRedo()) {
138 |         return;
139 |       }
140 |       historyManager.current.redo();
141 |       const {
142 |         markdown: redoMarkdown,
143 |         selectionStart,
144 |         selectionEnd,
145 |       } = historyManager.current.getValue();
146 |       htmlRef.current.value = redoMarkdown;
147 |       htmlRef.current.setSelectionRange(selectionStart, selectionEnd);
148 |       onChange(redoMarkdown);
149 |     };
150 | 
151 |     const handleKeyDown = useCallback(
152 |       (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
153 |         const textarea = e.target as HTMLTextAreaElement;
154 |         const line = getCurrentLine(textarea);
155 |         const lineAll = getCurrentLineAll(textarea);
156 |         const { value } = textarea;
157 |         const code = e.key;
158 |         const { shiftKey, metaKey, ctrlKey } = e;
159 |         const start = textarea.selectionStart!;
160 |         const end = textarea.selectionEnd!;
161 |         Object.keys(commands).forEach((key) => {
162 |           const command = commands[key];
163 |           const result = command(textarea, {
164 |             line,
165 |             lineAll,
166 |             value,
167 |             code,
168 |             shiftKey,
169 |             start,
170 |             end,
171 |             composing: composing.current,
172 |             metaKey,
173 |             ctrlKey,
174 |             emit,
175 |           });
176 |           if (!result) {
177 |             return;
178 |           }
179 |           if (result?.stop) {
180 |             e.preventDefault();
181 |           }
182 |           if (result?.change) {
183 |             onChange(textarea.value);
184 |           }
185 |         });
186 |       },
187 |       [composing]
188 |     );
189 | 
190 |     useImperativeHandle(ref, () => htmlRef.current);
191 | 
192 |     useSubscriber((event) => {
193 |       const target = htmlRef.current;
194 |       if (event.type === "insert") {
195 |         const { text } = event;
196 |         const start = target.selectionStart!;
197 |         insertTextAtCursor(htmlRef.current, text);
198 |         target.setSelectionRange(start + text.length, start + text.length);
199 |         onChange(target.value);
200 |       } else if (event.type === "replace") {
201 |         const { text, targetText } = event;
202 |         const currentSelection = target.selectionStart;
203 |         const offset = targetText.length - text.length;
204 |         target.value = target.value.replace(targetText, text);
205 |         target.setSelectionRange(
206 |           currentSelection + offset,
207 |           currentSelection + offset
208 |         );
209 |         onChange(target.value);
210 |       } else if (event.type === "undo") {
211 |         undo();
212 |       } else if (event.type === "redo") {
213 |         redo();
214 |       } else if (event.type === "focus") {
215 |         if (event.last) {
216 |           const { length } = htmlRef.current.value;
217 |           htmlRef.current.selectionStart = length;
218 |           htmlRef.current.selectionEnd = length;
219 |         }
220 |         htmlRef.current.focus();
221 |       } else if (event.type === "clear") {
222 |         htmlRef.current.value = "";
223 |         onChange("");
224 |       }
225 |     });
226 | 
227 |     useEffect(() => {
228 |       historyManager.current.push({
229 |         markdown,
230 |         selectionStart: htmlRef.current.selectionStart,
231 |         selectionEnd: htmlRef.current.selectionStart,
232 |       });
233 |     }, [markdown]);
234 | 
235 |     /**
236 |      * 変換中かどうか（isComposing）を適切に取得する
237 |      * - Safariだとkeydownの前にcompositionEndが発火される
238 |      *   => 変換確定時のkeydownにおいてisComposingの値が適切ではない（変換確定のEnterキーでhandleKeyDownがcomposing:falseとして呼ばれてしまう）
239 |      *   => keyupイベントで変換終了を確認することで対応
240 |      * - Chromeだとkeyupイベントの後にcompositionStartが発火される
241 |      *   => キーを離す前にEnterを押されると変換中であると認識されない
242 |      *   => keydownイベントで変換開始を確認することで対応
243 |      */
244 |     useEffect(() => {
245 |       const checkComposingStart = (e: KeyboardEvent) => {
246 |         if (e.isComposing) composing.current = true;
247 |       };
248 |       const checkComposingEnd = (e: KeyboardEvent) => {
249 |         if (!e.isComposing) composing.current = false;
250 |       };
251 |       htmlRef.current.addEventListener("keydown", checkComposingStart);
252 |       htmlRef.current.addEventListener("keyup", checkComposingEnd);
253 |       return () => {
254 |         htmlRef.current?.removeEventListener("keydown", checkComposingStart);
255 |         htmlRef.current?.removeEventListener("keyup", checkComposingEnd);
256 |       };
257 |     }, []);
258 | 
259 |     useDebounceCallback(
260 |       markdown,
261 |       (newValue) => {
262 |         requestAnimationFrame(() => {
263 |           if (!scrollSync) {
264 |             return;
265 |           }
266 |           const newLineHeightMap = buildLineHeightMap(
267 |             newValue,
268 |             htmlRef.current
269 |           );
270 |           setLineHeightMap(newLineHeightMap);
271 |         });
272 |       },
273 |       300
274 |     );
275 |     return (
276 |       <div className="react-split-mde-textarea-wrap">
277 |         {psudoMode && (
278 |           <SafeHTML
279 |             options={xssAllowOption}
280 |             ref={psudoRef}
281 |             className="react-split-mde-psudo"
282 |             tagName="pre"
283 |             html={decorationCode(markdown)}
284 |           />
285 |         )}
286 |         {React.createElement(autosize ? TextareaAutosize : "textarea", {
287 |           ref: htmlRef,
288 |           className: psudoMode
289 |             ? `react-split-mde-textarea react-split-mde-textarea-with-psudo ${className}`
290 |             : `react-split-mde-textarea ${className}`,
291 |           placeholder,
292 |           spellCheck: false,
293 |           onKeyDown: handleKeyDown,
294 |           defaultValue: markdown,
295 |           onChange: handleTextChange,
296 |           ...(scrollSync ? { onScroll: handleTextareaScroll } : {}),
297 |         })}
298 |       </div>
299 |     );
300 |   }
301 | );
302 |

--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./Textarea";
2 | export * from "./SafeHTML";
3 | export * from "./Editor";
4 |

--------------------------------------------------------------------------------
/src/decoration/index.ts:
--------------------------------------------------------------------------------
 1 | import highlight from "highlight.js/lib/core";
 2 | import md from "./markdown";
 3 | import * as transforms from "./transforms";
 4 | 
 5 | highlight.registerLanguage("markdown", md);
 6 | 
 7 | export const decorationCode = (code: string) => {
 8 |   let text = code;
 9 |   if (text.endsWith("\n")) {
10 |     text = `${text} `;
11 |   }
12 |   const { value: result } = highlight.highlight("markdown", text);
13 |   return result.replace(
14 |     /(<\s*span[^>]*>)(([\n\r\t]|.)*?)(<\s*\/\s*span>)/g,
15 |     (_match, p1, p2, _p3, p4) => {
16 |       let value = p2;
17 |       const [_, className] = p1.match(/class="(.*)?"/);
18 |       Object.keys(transforms).forEach((key) => {
19 |         value = transforms[key](value, className);
20 |       });
21 |       return `${p1}${value}${p4}`;
22 |     }
23 |   );
24 | };
25 |

--------------------------------------------------------------------------------
/src/decoration/markdown.ts:
--------------------------------------------------------------------------------
  1 | export default function (hljs) {
  2 |   const INLINE_HTML = {
  3 |     begin: "<",
  4 |     end: ">",
  5 |     subLanguage: "xml",
  6 |     relevance: 0,
  7 |   };
  8 |   const HORIZONTAL_RULE = {
  9 |     begin: "^[-\\*]{3,}",
 10 |     end: "$",
 11 |   };
 12 |   const CODE = {
 13 |     className: "code",
 14 |     variants: [
 15 |       // TODO: fix to allow these to work with sublanguage also
 16 |       { begin: "(`{3,})(.|\\n)*?\\1`*[ ]*" },
 17 |       { begin: "(~{3,})(.|\\n)*?\\1~*[ ]*" },
 18 |       // needed to allow markdown as a sublanguage to work
 19 |       { begin: "```", end: "```+[ ]*$" },
 20 |       { begin: "~~~", end: "~~~+[ ]*$" },
 21 |       { begin: "`.+?`" },
 22 |       {
 23 |         begin: "(?=^( {4}|\\t))",
 24 |         // use contains to gobble up multiple lines to allow the block to be whatever size
 25 |         // but only have a single open/close tag vs one per line
 26 |         contains: [{ begin: "^( {4}|\\t)", end: "(\\n)$" }],
 27 |         relevance: 0,
 28 |       },
 29 |     ],
 30 |   };
 31 |   const LIST = {
 32 |     className: "bullet",
 33 |     begin: "^[ \t]*([*+-]|(\\d+\\.))(?=\\s+)",
 34 |     end: "\\s+",
 35 |     excludeEnd: true,
 36 |   };
 37 |   const LINK_REFERENCE = {
 38 |     begin: /^\[[^\n]+\]:/,
 39 |     returnBegin: true,
 40 |     contains: [
 41 |       {
 42 |         className: "symbol",
 43 |         begin: /\[/,
 44 |         end: /\]/,
 45 |         excludeBegin: true,
 46 |         excludeEnd: true,
 47 |       },
 48 |       {
 49 |         className: "link",
 50 |         begin: /:\s*/,
 51 |         end: /$/,
 52 |         excludeBegin: true,
 53 |       },
 54 |     ],
 55 |   };
 56 |   const LINK = {
 57 |     begin: "\\[.+?\\][\$\\[].*?[\$\\]]",
 58 |     returnBegin: true,
 59 |     contains: [
 60 |       {
 61 |         className: "string",
 62 |         begin: "\\[",
 63 |         end: "\\]",
 64 |         excludeBegin: true,
 65 |         returnEnd: true,
 66 |         relevance: 0,
 67 |       },
 68 |       {
 69 |         className: "link",
 70 |         begin: "\\]\$",
 71 |         end: "\$",
 72 |         excludeBegin: true,
 73 |         excludeEnd: true,
 74 |       },
 75 |       {
 76 |         className: "symbol",
 77 |         begin: "\\]\\[",
 78 |         end: "\\]",
 79 |         excludeBegin: true,
 80 |         excludeEnd: true,
 81 |       },
 82 |     ],
 83 |     relevance: 9,
 84 |   };
 85 |   const IMAGE = {
 86 |     begin: "!\\[.+?\\][\$\\[].*?[\$\\]]",
 87 |     returnBegin: true,
 88 |     contains: [
 89 |       {
 90 |         className: "string",
 91 |         begin: "\\[",
 92 |         end: "\\]",
 93 |         excludeBegin: true,
 94 |         returnEnd: true,
 95 |         relevance: 0,
 96 |       },
 97 |       {
 98 |         className: "image",
 99 |         begin: "\\]\$",
100 |         end: "\$",
101 |         excludeBegin: true,
102 |         excludeEnd: true,
103 |       },
104 |       {
105 |         className: "symbol",
106 |         begin: "\\]\\[",
107 |         end: "\\]",
108 |         excludeBegin: true,
109 |         excludeEnd: true,
110 |       },
111 |     ],
112 |     relevance: 10,
113 |   };
114 |   const YOUTUBE = {
115 |     begin: "@\\[youtube\\][\$\\[].*?[\$\\]]",
116 |     returnBegin: true,
117 |     contains: [
118 |       {
119 |         className: "string",
120 |         begin: "\\[",
121 |         end: "\\]",
122 |         excludeBegin: true,
123 |         returnEnd: true,
124 |         relevance: 0,
125 |       },
126 |       {
127 |         className: "youtube",
128 |         begin: "\\]\$",
129 |         end: "\$",
130 |         excludeBegin: true,
131 |         excludeEnd: true,
132 |       },
133 |       {
134 |         className: "symbol",
135 |         begin: "\\]\\[",
136 |         end: "\\]",
137 |         excludeBegin: true,
138 |         excludeEnd: true,
139 |       },
140 |     ],
141 |     relevance: 10,
142 |   };
143 |   const TWITTER = {
144 |     begin: "@\\[tweet\\][\$\\[].*?[\$\\]]",
145 |     returnBegin: true,
146 |     contains: [
147 |       {
148 |         className: "string",
149 |         begin: "\\[",
150 |         end: "\\]",
151 |         excludeBegin: true,
152 |         returnEnd: true,
153 |         relevance: 0,
154 |       },
155 |       {
156 |         className: "tweet",
157 |         begin: "\\]\$",
158 |         end: "\$",
159 |         excludeBegin: true,
160 |         excludeEnd: true,
161 |       },
162 |       {
163 |         className: "symbol",
164 |         begin: "\\]\\[",
165 |         end: "\\]",
166 |         excludeBegin: true,
167 |         excludeEnd: true,
168 |       },
169 |     ],
170 |     relevance: 10,
171 |   };
172 |   const BOLD = {
173 |     className: "strong",
174 |     contains: [],
175 |     variants: [
176 |       { begin: /_{2}/, end: /_{2}/ },
177 |       { begin: /\*{2}/, end: /\*{2}/ },
178 |     ],
179 |   };
180 |   const ITALIC = {
181 |     className: "emphasis",
182 |     contains: [],
183 |     variants: [
184 |       { begin: /\*(?!\*)/, end: /\*/ },
185 |       { begin: /_(?!_)/, end: /_/, relevance: 0 },
186 |     ],
187 |   };
188 |   BOLD.contains.push(ITALIC);
189 |   ITALIC.contains.push(BOLD);
190 | 
191 |   let CONTAINABLE = [INLINE_HTML, LINK];
192 | 
193 |   BOLD.contains = BOLD.contains.concat(CONTAINABLE);
194 |   ITALIC.contains = ITALIC.contains.concat(CONTAINABLE);
195 | 
196 |   CONTAINABLE = CONTAINABLE.concat(BOLD as any, ITALIC as any);
197 | 
198 |   const HEADER = {
199 |     className: "section",
200 |     variants: [
201 |       {
202 |         begin: "^#{1,6}",
203 |         end: "$",
204 |         contains: CONTAINABLE,
205 |       },
206 |       {
207 |         begin: "(?=^.+?\\n[=-]{2,}$)",
208 |         contains: [
209 |           { begin: "^[=-]*$" },
210 |           { begin: "^", end: "\\n", contains: CONTAINABLE },
211 |         ],
212 |       },
213 |     ],
214 |   };
215 | 
216 |   const BLOCKQUOTE = {
217 |     className: "quote",
218 |     begin: "^>\\s+",
219 |     contains: CONTAINABLE,
220 |     end: "$",
221 |   };
222 | 
223 |   return {
224 |     name: "Markdown",
225 |     aliases: ["md", "mkdown", "mkd"],
226 |     contains: [
227 |       HEADER,
228 |       INLINE_HTML,
229 |       LIST,
230 |       BOLD,
231 |       ITALIC,
232 |       BLOCKQUOTE,
233 |       CODE,
234 |       HORIZONTAL_RULE,
235 |       LINK,
236 |       LINK_REFERENCE,
237 |       IMAGE,
238 |       YOUTUBE,
239 |       TWITTER,
240 |     ],
241 |   };
242 | }
243 |

--------------------------------------------------------------------------------
/src/decoration/transforms/code.ts:
--------------------------------------------------------------------------------
1 | export const code = (text: string) => {
2 |   return text.replace(
3 |     /```(([\n\r\t]|.)*?)```/g,
4 |     `<span class="code-start">\`\`\`</span>$1<span class="code-end">\`\`\`</span>`
5 |   );
6 | };
7 |

--------------------------------------------------------------------------------
/src/decoration/transforms/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./code";
2 | export * from "./title";
3 | export * from "./widget";
4 |

--------------------------------------------------------------------------------
/src/decoration/transforms/title.ts:
--------------------------------------------------------------------------------
 1 | export const title = (text: string, className: string) => {
 2 |   if (className === "hljs-code") {
 3 |     return text;
 4 |   }
 5 |   return text.replace(/^(#+) (.*)?/g, (match, p1, p2) => {
 6 |     return `<span class="sharp">${p1} </span><span class="title-${p1.length}">${
 7 |       p2 || ""
 8 |     }</span> `;
 9 |   });
10 | };
11 |

--------------------------------------------------------------------------------
/src/decoration/transforms/widget.ts:
--------------------------------------------------------------------------------
 1 | export const twitter = (text: string, className: string) => {
 2 |   if (className !== "hljs-string") {
 3 |     return text;
 4 |   }
 5 |   return text.replace(/^tweet/g, (match) => {
 6 |     return `<span class="tweet">${match}</span>`;
 7 |   });
 8 | };
 9 | 
10 | export const youtube = (text: string, className: string) => {
11 |   if (className !== "hljs-string") {
12 |     return text;
13 |   }
14 |   return text.replace(/^youtube/g, (match) => {
15 |     return `<span class="youtube">${match}</span>`;
16 |   });
17 | };
18 |

--------------------------------------------------------------------------------
/src/hooks/debounce.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | 
 3 | export function useDebounce<T>(value: T, delay: number) {
 4 |   const [debouncedValue, setDebouncedValue] = useState(value);
 5 | 
 6 |   useEffect(() => {
 7 |     const handler = setTimeout(() => {
 8 |       setDebouncedValue(value);
 9 |     }, delay);
10 | 
11 |     return () => {
12 |       clearTimeout(handler);
13 |     };
14 |   }, [value]);
15 | 
16 |   return debouncedValue;
17 | }
18 | 
19 | export function useDebounceCallback<T>(
20 |   value: T,
21 |   callback: (newValue: T) => void,
22 |   delay: number
23 | ) {
24 |   useEffect(() => {
25 |     const handler = setTimeout(() => {
26 |       callback(value);
27 |     }, delay);
28 | 
29 |     return () => {
30 |       clearTimeout(handler);
31 |     };
32 |   }, [value]);
33 | }
34 |

--------------------------------------------------------------------------------
/src/hooks/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { eventmit, EventmitHandler } from "eventmit";
 3 | 
 4 | const { useRef, useContext, useEffect, useMemo } = React;
 5 | const EmitterContext = React.createContext(eventmit());
 6 | const { Provider } = EmitterContext;
 7 | 
 8 | const createEmitterProvider = (subscription: ReturnType<typeof eventmit>) => ({
 9 |   children,
10 | }: {
11 |   children: React.ReactNode;
12 | }) => {
13 |   return <Provider value={subscription}>{children}</Provider>;
14 | };
15 | 
16 | export type EmitEvent =
17 |   | {
18 |       type: "insert";
19 |       text: string;
20 |     }
21 |   | {
22 |       type: "remove";
23 |       text: string;
24 |     }
25 |   | {
26 |       type: "scroll";
27 |       lineNo: number;
28 |       lineHeightMap: number[];
29 |       remaining: number;
30 |     }
31 |   | {
32 |       type: "replace";
33 |       text: string;
34 |       targetText: string;
35 |     }
36 |   | {
37 |       type: "undo";
38 |     }
39 |   | {
40 |       type: "redo";
41 |     }
42 |   | {
43 |       type: "focus";
44 |       last?: boolean;
45 |     }
46 |   | {
47 |       type: "clear";
48 |     };
49 | 
50 | export const useProvider = <T extends EmitEvent>() => {
51 |   const emitter = useRef(eventmit<T>());
52 |   const MemorizedProvider = useMemo(
53 |     () => createEmitterProvider(emitter.current),
54 |     []
55 |   );
56 |   return [emitter.current.emit, MemorizedProvider] as const;
57 | };
58 | 
59 | export const useEmitter = <T extends EmitEvent>() => {
60 |   const ctx = useContext(EmitterContext);
61 |   return ctx.emit as (value: T) => void;
62 | };
63 | 
64 | export const useSubscriber = <T extends EmitEvent>(fn: EventmitHandler<T>) => {
65 |   const ctx = useContext(EmitterContext);
66 |   useEffect(() => {
67 |     ctx.on(fn);
68 |     return () => {
69 |       ctx.off(fn);
70 |     };
71 |   }, [ctx, fn]);
72 | };
73 |

--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import * as defaultCommands from "./commands";
2 | 
3 | export * from "./components";
4 | export * from "./hooks";
5 | export * from "./types";
6 | export { defaultCommands };
7 |

--------------------------------------------------------------------------------
/src/parser/index.ts:
--------------------------------------------------------------------------------
 1 | import markdownHTML, { enablePreview } from "zenn-markdown-html";
 2 | 
 3 | enablePreview();
 4 | 
 5 | export const parser = (value: string): Promise<string> => {
 6 |   return new Promise((resolve) => {
 7 |     return resolve(markdownHTML(value));
 8 |   });
 9 | };
10 |

--------------------------------------------------------------------------------
/src/types/commands.ts:
--------------------------------------------------------------------------------
 1 | import { EmitEvent } from "../hooks";
 2 | 
 3 | export type CommandOption = {
 4 |   line: string;
 5 |   lineAll: string;
 6 |   value: string;
 7 |   code: string;
 8 |   shiftKey: boolean;
 9 |   ctrlKey: boolean;
10 |   metaKey: boolean;
11 |   start: number;
12 |   end: number;
13 |   composing: boolean;
14 |   emit: (event: EmitEvent) => void;
15 | };
16 | 
17 | export const EnterKey = "Enter";
18 | 
19 | export const TabKey = "Tab";
20 | 
21 | export type Command = (
22 |   target: HTMLTextAreaElement,
23 |   option: CommandOption
24 | ) => { stop: boolean; change: boolean } | void;
25 |

--------------------------------------------------------------------------------
/src/types/decorations.ts:
--------------------------------------------------------------------------------
1 | export type Decoration = (text: string, className?: string) => string;
2 |

--------------------------------------------------------------------------------
/src/types/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./commands";
2 | export * from "./decorations";
3 |

--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./text";
2 |

--------------------------------------------------------------------------------
/src/utils/text.ts:
--------------------------------------------------------------------------------
 1 | export function getCurrentLine(target: HTMLTextAreaElement) {
 2 |   const starVal = target.value.substr(0, target.selectionStart);
 3 |   const valArr = starVal.split("\n");
 4 |   const currentLineStr = valArr[valArr.length - 1];
 5 |   return currentLineStr;
 6 | }
 7 | 
 8 | export function getCurrentLineAll(target: HTMLTextAreaElement) {
 9 |   const starVal = target.value.substr(0, target.selectionStart);
10 |   const valArr = starVal.split("\n");
11 |   const currentLineNum = valArr.length - 1;
12 |   const allLine = target.value.split("\n");
13 |   return allLine[currentLineNum];
14 | }
15 | 
16 | export function insertTextAtCursor(target: HTMLTextAreaElement, text: string) {
17 |   target.setRangeText(text);
18 | }
19 | 
20 | export function putCaretAtFirstLine(target) {
21 |   const currentLineStr = getCurrentLine(target);
22 |   target.setSelectionRange(
23 |     target.selectionStart - currentLineStr.length,
24 |     target.selectionStart - currentLineStr.length
25 |   );
26 | }
27 | 
28 | export function insertTextAtCursorFirstLine(
29 |   target: HTMLTextAreaElement,
30 |   text: string
31 | ) {
32 |   putCaretAtFirstLine(target);
33 |   insertTextAtCursor(target, text);
34 | }
35 | 
36 | export function removeTextAtFirstLine(
37 |   target: HTMLTextAreaElement,
38 |   count: number
39 | ) {
40 |   const savedSelection = target.selectionStart - count;
41 |   const starVal = target.value.substr(0, target.selectionStart);
42 |   const valArr = starVal.split("\n");
43 |   const currentLineNum = valArr.length - 1;
44 |   const allLine = target.value.split("\n");
45 |   let currentLine = allLine[currentLineNum];
46 |   currentLine = currentLine.substr(count);
47 |   const lines = target.value.split("\n");
48 |   lines[valArr.length - 1] = currentLine;
49 |   const final = lines.join("\n");
50 |   // eslint-disable-next-line
51 |   target.value = final;
52 |   target.setSelectionRange(savedSelection, savedSelection);
53 | }
54 |

--------------------------------------------------------------------------------
/src/utils/undo-redo.ts:
--------------------------------------------------------------------------------
 1 | export class UndoRedo<T> {
 2 |   stacks: T[] = [];
 3 |   stackIndex: number = 0;
 4 |   stopStack: boolean = false;
 5 | 
 6 |   constructor(defaultValue: T) {
 7 |     this.stacks.push(defaultValue);
 8 |   }
 9 | 
10 |   canRedo() {
11 |     if (this.stackIndex < this.stacks.length - 1) {
12 |       return true;
13 |     }
14 |     return false;
15 |   }
16 | 
17 |   canUndo() {
18 |     if (this.stackIndex > 0) {
19 |       return true;
20 |     }
21 |     return false;
22 |   }
23 | 
24 |   redo() {
25 |     if (this.canRedo()) {
26 |       this.stackIndex += 1;
27 |       this.stopStack = true;
28 |     }
29 |   }
30 | 
31 |   undo() {
32 |     if (this.canUndo()) {
33 |       this.stackIndex -= 1;
34 |       this.stopStack = true;
35 |     }
36 |   }
37 | 
38 |   push(value: T) {
39 |     if (this.stopStack) {
40 |       this.stopStack = false;
41 |     } else {
42 |       this.stackIndex += 1;
43 |       this.stacks.push(value);
44 |     }
45 |   }
46 | 
47 |   getValue() {
48 |     return this.stacks[this.stackIndex];
49 |   }
50 | }
51 |

--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "commonjs",
 5 |     "moduleResolution": "node",
 6 |     "esModuleInterop": true,
 7 |     "outDir": "./lib",
 8 |     "sourceMap": true,
 9 |     "declaration": true,
10 |     "strict": false,
11 |     "jsx": "react",
12 |     "lib": [
13 |       "es2018",
14 |       "dom",
15 |       "webworker",
16 |     ],
17 |     "types": ["react"],
18 |     "typeRoots": ["./demo/@types", "./src/@types"]
19 |   },
20 |   "exclude": ["node_modules"]
21 | }

--------------------------------------------------------------------------------
/tsconfig.prod.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "commonjs",
 5 |     "moduleResolution": "node",
 6 |     "esModuleInterop": true,
 7 |     "outDir": "./lib",
 8 |     "sourceMap": true,
 9 |     "declaration": true,
10 |     "strict": false,
11 |     "jsx": "react",
12 |     "lib": [
13 |       "es2018",
14 |       "dom",
15 |     ],
16 |     "types": ["react"],
17 |     "typeRoots": ["./demo/@types", "./src/@types"]
18 |   },
19 |   "include": ["src"],
20 |   "exclude": ["node_modules"]
21 | }

--------------------------------------------------------------------------------
/utility/version-check.js:
--------------------------------------------------------------------------------
 1 | const pkg = require("../package.json");
 2 | 
 3 | const branch = process.env.BRANCH_NAME;
 4 | const [type, version] = branch.split("/");
 5 | 
 6 | console.log(pkg.version, version);
 7 | 
 8 | if (pkg.version !== version) {
 9 |   throw new Error("version not matched");
10 | }
11 |

--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | 
 3 | // for not jsx users
 4 | module.exports = {
 5 |   mode: "production",
 6 |   entry: {
 7 |     main: "./demo/index.tsx",
 8 |   },
 9 |   resolve: {
10 |     extensions: [".ts", ".tsx", ".js"],
11 |   },
12 |   externals: ["fs"],
13 |   module: {
14 |     rules: [
15 |       {
16 |         test: /\.txt$/i,
17 |         use: "raw-loader",
18 |       },
19 |       // {
20 |       //   test: /worker\.ts$/,
21 |       //   use: { loader: 'worker-loader' },
22 |       // },
23 |       {
24 |         test: /\.tsx?$/,
25 |         exclude: /node_modules/,
26 |         loader: "ts-loader",
27 |         options: {
28 |           transpileOnly: true,
29 |         },
30 |       },
31 |       {
32 |         test: /\.css$/,
33 |         use: ["style-loader", "css-loader"],
34 |       },
35 |     ],
36 |   },
37 | };
38 |

--------------------------------------------------------------------------------