@uiw/react-md-editor 3.20.3 → 3.20.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/mdeditor.css +2 -2
- package/dist/mdeditor.js +19 -20
- package/dist/mdeditor.min.css +1 -1
- package/dist/mdeditor.min.js +1 -1
- package/esm/commands/bold.js +7 -5
- package/esm/commands/bold.js.map +7 -5
- package/esm/commands/hr.js +1 -1
- package/esm/commands/hr.js.map +4 -3
- package/esm/commands/image.js +10 -5
- package/esm/commands/image.js.map +6 -2
- package/esm/commands/index.d.ts +4 -1
- package/esm/commands/index.js +4 -1
- package/esm/commands/index.js.map +2 -2
- package/esm/commands/italic.js +9 -6
- package/esm/commands/italic.js.map +7 -5
- package/esm/commands/link.js +7 -4
- package/esm/commands/link.js.map +7 -5
- package/esm/commands/strikeThrough.js +9 -6
- package/esm/commands/strikeThrough.js.map +7 -5
- package/esm/components/TextArea/index.css +2 -2
- package/esm/components/TextArea/index.less +2 -2
- package/lib/commands/bold.js +7 -5
- package/lib/commands/bold.js.map +7 -5
- package/lib/commands/hr.js +1 -1
- package/lib/commands/hr.js.map +4 -3
- package/lib/commands/image.js +10 -5
- package/lib/commands/image.js.map +6 -2
- package/lib/commands/index.d.ts +4 -1
- package/lib/commands/index.js +4 -1
- package/lib/commands/index.js.map +2 -2
- package/lib/commands/italic.js +9 -6
- package/lib/commands/italic.js.map +7 -5
- package/lib/commands/link.js +7 -4
- package/lib/commands/link.js.map +7 -5
- package/lib/commands/strikeThrough.js +9 -6
- package/lib/commands/strikeThrough.js.map +7 -5
- package/lib/components/TextArea/index.less +2 -2
- package/markdown-editor.css +2 -2
- package/package.json +1 -1
- package/src/commands/bold.tsx +9 -8
- package/src/commands/hr.tsx +3 -3
- package/src/commands/image.tsx +12 -9
- package/src/commands/index.ts +5 -2
- package/src/commands/italic.tsx +11 -10
- package/src/commands/link.tsx +8 -8
- package/src/commands/strikeThrough.tsx +11 -10
- package/src/components/TextArea/index.less +2 -2
package/lib/commands/hr.js.map
CHANGED
|
@@ -13,13 +13,14 @@
|
|
|
13
13
|
"state",
|
|
14
14
|
"api",
|
|
15
15
|
"replaceSelection",
|
|
16
|
-
"selectedText"
|
|
16
|
+
"selectedText",
|
|
17
|
+
"command"
|
|
17
18
|
],
|
|
18
19
|
"sources": [
|
|
19
20
|
"../../src/commands/hr.tsx"
|
|
20
21
|
],
|
|
21
22
|
"sourcesContent": [
|
|
22
|
-
"import * as React from 'react';\nimport { ICommand,
|
|
23
|
+
"import * as React from 'react';\nimport { ICommand, ExecuteState, TextAreaTextApi } from './';\n\nexport const hr: ICommand = {\n name: 'hr',\n keyCommand: 'hr',\n shortcuts: 'ctrlcmd+h',\n value: '----------',\n buttonProps: { 'aria-label': 'Insert HR (ctrl + h)', title: 'Insert HR (ctrl + h)' },\n icon: (\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 175 175\">\n <path\n fill=\"currentColor\"\n d=\"M0,129 L175,129 L175,154 L0,154 L0,129 Z M3,9 L28.2158203,9 L28.2158203,47.9824219 L55.7695313,47.9824219 L55.7695313,9 L81.0966797,9 L81.0966797,107.185547 L55.7695313,107.185547 L55.7695313,68.0214844 L28.2158203,68.0214844 L28.2158203,107.185547 L3,107.185547 L3,9 Z M93.1855469,100.603516 L93.1855469,19 L135.211914,19 C143.004922,19 148.960917,19.6679621 153.080078,21.0039063 C157.199239,22.3398504 160.520495,24.8168764 163.043945,28.4350586 C165.567395,32.0532407 166.829102,36.459935 166.829102,41.6552734 C166.829102,46.1826398 165.864267,50.0883625 163.93457,53.3725586 C162.004873,56.6567547 159.351579,59.3193257 155.974609,61.3603516 C153.822255,62.6591862 150.872089,63.7353473 147.124023,64.5888672 C150.129898,65.5908253 152.319329,66.5927684 153.692383,67.5947266 C154.620122,68.2626987 155.965323,69.6913953 157.728027,71.8808594 C159.490731,74.0703234 160.668942,75.7587831 161.262695,76.9462891 L173,100.603516 L144.953125,100.603516 L131.482422,75.6660156 C129.775382,72.4374839 128.253913,70.3408251 126.917969,69.3759766 C125.0996,68.1142515 123.040051,67.4833984 120.739258,67.4833984 L118.512695,67.4833984 L118.512695,100.603516 L93.1855469,100.603516 Z M118.512695,52.0644531 L129.144531,52.0644531 C130.294928,52.0644531 132.521468,51.6933631 135.824219,50.9511719 C137.494149,50.6171858 138.857905,49.7636787 139.915527,48.390625 C140.97315,47.0175713 141.501953,45.4404386 141.501953,43.6591797 C141.501953,41.0244009 140.667001,39.0019602 138.99707,37.5917969 C137.32714,36.1816336 134.191429,35.4765625 129.589844,35.4765625 L117.512695,35.4765625 L118.512695,52.0644531 Z\"\n transform=\"translate(0 9)\"\n />\n </svg>\n ),\n execute: (state: ExecuteState, api: TextAreaTextApi) => {\n api.replaceSelection(`${state.selectedText}\\n\\n${state.command.value || ''}-\\n\\n`);\n },\n};\n"
|
|
23
24
|
],
|
|
24
|
-
"mappings": ";;;;;;;AAAA;AAA+B;AAGxB,IAAMA,EAAY,GAAG;EAC1BC,IAAI,EAAE,IAAI;EACVC,UAAU,EAAE,IAAI;EAChBC,SAAS,EAAE,WAAW;EACtBC,KAAK,EAAE,YAAY;EACnBC,WAAW,EAAE;IAAE,YAAY,EAAE,sBAAsB;IAAEC,KAAK,EAAE;EAAuB,CAAC;EACpFC,IAAI,eACF;IAAK,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,OAAO,EAAC,aAAa;IAAA,uBAC/C;MACE,IAAI,EAAC,cAAc;MACnB,CAAC,EAAC,ukDAAukD;MACzkD,SAAS,EAAC;IAAgB;EAC1B,EAEL;EACDC,OAAO,EAAE,iBAACC,
|
|
25
|
+
"mappings": ";;;;;;;AAAA;AAA+B;AAGxB,IAAMA,EAAY,GAAG;EAC1BC,IAAI,EAAE,IAAI;EACVC,UAAU,EAAE,IAAI;EAChBC,SAAS,EAAE,WAAW;EACtBC,KAAK,EAAE,YAAY;EACnBC,WAAW,EAAE;IAAE,YAAY,EAAE,sBAAsB;IAAEC,KAAK,EAAE;EAAuB,CAAC;EACpFC,IAAI,eACF;IAAK,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,OAAO,EAAC,aAAa;IAAA,uBAC/C;MACE,IAAI,EAAC,cAAc;MACnB,CAAC,EAAC,ukDAAukD;MACzkD,SAAS,EAAC;IAAgB;EAC1B,EAEL;EACDC,OAAO,EAAE,iBAACC,KAAmB,EAAEC,GAAoB,EAAK;IACtDA,GAAG,CAACC,gBAAgB,WAAIF,KAAK,CAACG,YAAY,iBAAOH,KAAK,CAACI,OAAO,CAACT,KAAK,IAAI,EAAE,WAAQ;EACpF;AACF,CAAC;AAAC"
|
|
25
26
|
}
|
package/lib/commands/image.js
CHANGED
|
@@ -12,7 +12,7 @@ var image = {
|
|
|
12
12
|
name: 'image',
|
|
13
13
|
keyCommand: 'image',
|
|
14
14
|
shortcuts: 'ctrlcmd+k',
|
|
15
|
-
value: '![image]()',
|
|
15
|
+
value: '',
|
|
16
16
|
buttonProps: {
|
|
17
17
|
'aria-label': 'Add image (ctrl + k)',
|
|
18
18
|
title: 'Add image (ctrl + k)'
|
|
@@ -35,11 +35,16 @@ var image = {
|
|
|
35
35
|
var state1 = api.setSelectionRange(newSelectionRange);
|
|
36
36
|
// Replaces the current selection with the image
|
|
37
37
|
var imageTemplate = state1.selectedText || 'https://example.com/your-image.png';
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
var val = state.command.value || '';
|
|
39
|
+
api.replaceSelection(val.replace(/({{text}})/gi, imageTemplate));
|
|
40
|
+
var start = state1.selection.start + val.indexOf('{{text}}');
|
|
41
|
+
var end = state1.selection.start + val.indexOf('{{text}}') + (state1.selection.end - state1.selection.start);
|
|
42
|
+
if (!state1.selectedText) {
|
|
43
|
+
end = end + imageTemplate.length;
|
|
44
|
+
}
|
|
40
45
|
api.setSelectionRange({
|
|
41
|
-
start:
|
|
42
|
-
end:
|
|
46
|
+
start: start,
|
|
47
|
+
end: end
|
|
43
48
|
});
|
|
44
49
|
}
|
|
45
50
|
};
|
|
@@ -20,8 +20,12 @@
|
|
|
20
20
|
"setSelectionRange",
|
|
21
21
|
"imageTemplate",
|
|
22
22
|
"selectedText",
|
|
23
|
+
"val",
|
|
24
|
+
"command",
|
|
23
25
|
"replaceSelection",
|
|
26
|
+
"replace",
|
|
24
27
|
"start",
|
|
28
|
+
"indexOf",
|
|
25
29
|
"end",
|
|
26
30
|
"length"
|
|
27
31
|
],
|
|
@@ -29,7 +33,7 @@
|
|
|
29
33
|
"../../src/commands/image.tsx"
|
|
30
34
|
],
|
|
31
35
|
"sourcesContent": [
|
|
32
|
-
"import * as React from 'react';\nimport { ICommand,
|
|
36
|
+
"import * as React from 'react';\nimport { ICommand, ExecuteState, TextAreaTextApi } from './';\nimport { selectWord } from '../utils/markdownUtils';\n\nexport const image: ICommand = {\n name: 'image',\n keyCommand: 'image',\n shortcuts: 'ctrlcmd+k',\n value: '',\n buttonProps: { 'aria-label': 'Add image (ctrl + k)', title: 'Add image (ctrl + k)' },\n icon: (\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 20 20\">\n <path\n fill=\"currentColor\"\n d=\"M15 9c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4-7H1c-.55 0-1 .45-1 1v14c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 13l-6-5-2 2-4-5-4 8V4h16v11z\"\n />\n </svg>\n ),\n execute: (state: ExecuteState, api: TextAreaTextApi) => {\n // Select everything\n const newSelectionRange = selectWord({ text: state.text, selection: state.selection });\n const state1 = api.setSelectionRange(newSelectionRange);\n // Replaces the current selection with the image\n const imageTemplate = state1.selectedText || 'https://example.com/your-image.png';\n const val = state.command.value || '';\n api.replaceSelection(val.replace(/({{text}})/gi, imageTemplate));\n\n const start = state1.selection.start + val.indexOf('{{text}}');\n let end = state1.selection.start + val.indexOf('{{text}}') + (state1.selection.end - state1.selection.start);\n if (!state1.selectedText) {\n end = end + imageTemplate.length;\n }\n api.setSelectionRange({ start, end });\n },\n};\n"
|
|
33
37
|
],
|
|
34
|
-
"mappings": ";;;;;;;AAAA;AAEA;AAAoD;AAE7C,IAAMA,KAAe,GAAG;EAC7BC,IAAI,EAAE,OAAO;EACbC,UAAU,EAAE,OAAO;EACnBC,SAAS,EAAE,WAAW;EACtBC,KAAK,EAAE,
|
|
38
|
+
"mappings": ";;;;;;;AAAA;AAEA;AAAoD;AAE7C,IAAMA,KAAe,GAAG;EAC7BC,IAAI,EAAE,OAAO;EACbC,UAAU,EAAE,OAAO;EACnBC,SAAS,EAAE,WAAW;EACtBC,KAAK,EAAE,oBAAoB;EAC3BC,WAAW,EAAE;IAAE,YAAY,EAAE,sBAAsB;IAAEC,KAAK,EAAE;EAAuB,CAAC;EACpFC,IAAI,eACF;IAAK,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,OAAO,EAAC,WAAW;IAAA,uBAC7C;MACE,IAAI,EAAC,cAAc;MACnB,CAAC,EAAC;IAAkK;EACpK,EAEL;EACDC,OAAO,EAAE,iBAACC,KAAmB,EAAEC,GAAoB,EAAK;IACtD;IACA,IAAMC,iBAAiB,GAAG,IAAAC,yBAAU,EAAC;MAAEC,IAAI,EAAEJ,KAAK,CAACI,IAAI;MAAEC,SAAS,EAAEL,KAAK,CAACK;IAAU,CAAC,CAAC;IACtF,IAAMC,MAAM,GAAGL,GAAG,CAACM,iBAAiB,CAACL,iBAAiB,CAAC;IACvD;IACA,IAAMM,aAAa,GAAGF,MAAM,CAACG,YAAY,IAAI,oCAAoC;IACjF,IAAMC,GAAG,GAAGV,KAAK,CAACW,OAAO,CAAChB,KAAK,IAAI,EAAE;IACrCM,GAAG,CAACW,gBAAgB,CAACF,GAAG,CAACG,OAAO,CAAC,cAAc,EAAEL,aAAa,CAAC,CAAC;IAEhE,IAAMM,KAAK,GAAGR,MAAM,CAACD,SAAS,CAACS,KAAK,GAAGJ,GAAG,CAACK,OAAO,CAAC,UAAU,CAAC;IAC9D,IAAIC,GAAG,GAAGV,MAAM,CAACD,SAAS,CAACS,KAAK,GAAGJ,GAAG,CAACK,OAAO,CAAC,UAAU,CAAC,IAAIT,MAAM,CAACD,SAAS,CAACW,GAAG,GAAGV,MAAM,CAACD,SAAS,CAACS,KAAK,CAAC;IAC5G,IAAI,CAACR,MAAM,CAACG,YAAY,EAAE;MACxBO,GAAG,GAAGA,GAAG,GAAGR,aAAa,CAACS,MAAM;IAClC;IACAhB,GAAG,CAACM,iBAAiB,CAAC;MAAEO,KAAK,EAALA,KAAK;MAAEE,GAAG,EAAHA;IAAI,CAAC,CAAC;EACvC;AACF,CAAC;AAAC"
|
|
35
39
|
}
|
package/lib/commands/index.d.ts
CHANGED
|
@@ -47,8 +47,11 @@ export interface ICommandBase<T> {
|
|
|
47
47
|
liProps?: React.LiHTMLAttributes<HTMLLIElement>;
|
|
48
48
|
buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;
|
|
49
49
|
render?: (command: ICommand<T>, disabled: boolean, executeCommand: (command: ICommand<T>, name?: string) => void, index: number) => void | undefined | null | React.ReactElement;
|
|
50
|
-
execute?: (state:
|
|
50
|
+
execute?: (state: ExecuteState, api: TextAreaTextApi, dispatch?: React.Dispatch<ContextStore>, executeCommandState?: ExecuteCommandState, shortcuts?: string[]) => void;
|
|
51
51
|
}
|
|
52
|
+
export declare type ExecuteState = TextState & {
|
|
53
|
+
command: ICommand;
|
|
54
|
+
};
|
|
52
55
|
export declare type ICommand<T = string> = ICommandChildCommands<T> | ICommandChildHandle<T>;
|
|
53
56
|
export interface TextRange {
|
|
54
57
|
start: number;
|
package/lib/commands/index.js
CHANGED
|
@@ -163,6 +163,7 @@ Object.defineProperty(exports, "unorderedListCommand", {
|
|
|
163
163
|
return _list.unorderedListCommand;
|
|
164
164
|
}
|
|
165
165
|
});
|
|
166
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
166
167
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
167
168
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
168
169
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
@@ -266,7 +267,9 @@ var TextAreaCommandOrchestrator = /*#__PURE__*/function () {
|
|
|
266
267
|
}, {
|
|
267
268
|
key: "executeCommand",
|
|
268
269
|
value: function executeCommand(command, dispatch, state, shortcuts) {
|
|
269
|
-
command.execute && command.execute(
|
|
270
|
+
command.execute && command.execute((0, _objectSpread2["default"])({
|
|
271
|
+
command: command
|
|
272
|
+
}, getStateFromTextArea(this.textArea)), this.textApi, dispatch, state, shortcuts);
|
|
270
273
|
}
|
|
271
274
|
}]);
|
|
272
275
|
return TextAreaCommandOrchestrator;
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"../../src/commands/index.ts"
|
|
59
59
|
],
|
|
60
60
|
"sourcesContent": [
|
|
61
|
-
"import React from 'react';\nimport { ContextStore, ExecuteCommandState } from '../Context';\nimport { insertTextAtPosition } from '../utils/InsertTextAtPosition';\nimport { bold } from './bold';\nimport { code, codeBlock } from './code';\nimport { comment } from './comment';\nimport { divider } from './divider';\nimport { fullscreen } from './fullscreen';\nimport { group } from './group';\nimport { hr } from './hr';\nimport { image } from './image';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { checkedListCommand, orderedListCommand, unorderedListCommand } from './list';\nimport { codeEdit, codeLive, codePreview } from './preview';\nimport { quote } from './quote';\nimport { strikethrough } from './strikeThrough';\nimport { title } from './title';\nimport { title1 } from './title1';\nimport { title2 } from './title2';\nimport { title3 } from './title3';\nimport { title4 } from './title4';\nimport { title5 } from './title5';\nimport { title6 } from './title6';\n\nexport interface CommandOrchestrator {\n executeCommand(command: ICommand): void;\n}\n\nexport interface ICommandChildHandle<T = string> extends ICommandBase<T> {\n children?: (handle: {\n close: () => void;\n execute: () => void;\n getState?: TextAreaCommandOrchestrator['getState'];\n textApi?: TextAreaTextApi;\n }) => React.ReactElement;\n}\n\nexport interface ICommandChildCommands<T = string> extends ICommandBase<T> {\n children?: Array<ICommand<T>>;\n}\n\nexport interface ICommandBase<T> {\n parent?: ICommand<any>;\n keyCommand?: string;\n name?: string;\n shortcuts?: string;\n groupName?: string;\n icon?: React.ReactElement;\n value?: T;\n position?: 'right';\n liProps?: React.LiHTMLAttributes<HTMLLIElement>;\n buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;\n render?: (\n command: ICommand<T>,\n disabled: boolean,\n executeCommand: (command: ICommand<T>, name?: string) => void,\n index: number,\n ) => void | undefined | null | React.ReactElement;\n execute?: (\n state:
|
|
61
|
+
"import React from 'react';\nimport { ContextStore, ExecuteCommandState } from '../Context';\nimport { insertTextAtPosition } from '../utils/InsertTextAtPosition';\nimport { bold } from './bold';\nimport { code, codeBlock } from './code';\nimport { comment } from './comment';\nimport { divider } from './divider';\nimport { fullscreen } from './fullscreen';\nimport { group } from './group';\nimport { hr } from './hr';\nimport { image } from './image';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { checkedListCommand, orderedListCommand, unorderedListCommand } from './list';\nimport { codeEdit, codeLive, codePreview } from './preview';\nimport { quote } from './quote';\nimport { strikethrough } from './strikeThrough';\nimport { title } from './title';\nimport { title1 } from './title1';\nimport { title2 } from './title2';\nimport { title3 } from './title3';\nimport { title4 } from './title4';\nimport { title5 } from './title5';\nimport { title6 } from './title6';\n\nexport interface CommandOrchestrator {\n executeCommand(command: ICommand): void;\n}\n\nexport interface ICommandChildHandle<T = string> extends ICommandBase<T> {\n children?: (handle: {\n close: () => void;\n execute: () => void;\n getState?: TextAreaCommandOrchestrator['getState'];\n textApi?: TextAreaTextApi;\n }) => React.ReactElement;\n}\n\nexport interface ICommandChildCommands<T = string> extends ICommandBase<T> {\n children?: Array<ICommand<T>>;\n}\n\nexport interface ICommandBase<T> {\n parent?: ICommand<any>;\n keyCommand?: string;\n name?: string;\n shortcuts?: string;\n groupName?: string;\n icon?: React.ReactElement;\n value?: T;\n position?: 'right';\n liProps?: React.LiHTMLAttributes<HTMLLIElement>;\n buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;\n render?: (\n command: ICommand<T>,\n disabled: boolean,\n executeCommand: (command: ICommand<T>, name?: string) => void,\n index: number,\n ) => void | undefined | null | React.ReactElement;\n execute?: (\n state: ExecuteState,\n api: TextAreaTextApi,\n dispatch?: React.Dispatch<ContextStore>,\n executeCommandState?: ExecuteCommandState,\n shortcuts?: string[],\n ) => void;\n}\n\nexport type ExecuteState = TextState & { command: ICommand };\n\nexport type ICommand<T = string> = ICommandChildCommands<T> | ICommandChildHandle<T>;\n\nexport interface TextRange {\n start: number;\n end: number;\n}\n\nexport interface TextState {\n text: string;\n selectedText: string;\n selection: TextRange;\n}\n\nconst getCommands: () => ICommand[] = () => [\n bold,\n italic,\n strikethrough,\n hr,\n group([title1, title2, title3, title4, title5, title6], {\n name: 'title',\n groupName: 'title',\n buttonProps: { 'aria-label': 'Insert title', title: 'Insert title' },\n }),\n divider,\n link,\n quote,\n code,\n codeBlock,\n comment,\n image,\n divider,\n unorderedListCommand,\n orderedListCommand,\n checkedListCommand,\n];\n\nconst getExtraCommands: () => ICommand[] = () => [codeEdit, codeLive, codePreview, divider, fullscreen];\n\nfunction getStateFromTextArea(textArea: HTMLTextAreaElement): TextState {\n return {\n selection: {\n start: textArea.selectionStart,\n end: textArea.selectionEnd,\n },\n text: textArea.value,\n selectedText: textArea.value?.slice(textArea.selectionStart, textArea.selectionEnd),\n };\n}\n\nclass TextAreaTextApi {\n textArea: HTMLTextAreaElement;\n\n constructor(textArea: HTMLTextAreaElement) {\n this.textArea = textArea;\n }\n\n /**\n * Replaces the current selection with the new text. This will make the new selectedText to be empty, the\n * selection start and selection end will be the same and will both point to the end\n * @param text Text that should replace the current selection\n */\n replaceSelection(text: string): TextState {\n insertTextAtPosition(this.textArea, text);\n return getStateFromTextArea(this.textArea);\n }\n\n /**\n * Selects the specified text range\n * @param selection\n */\n setSelectionRange(selection: TextRange): TextState {\n this.textArea.focus();\n this.textArea.selectionStart = selection.start;\n this.textArea.selectionEnd = selection.end;\n return getStateFromTextArea(this.textArea);\n }\n}\n\nclass TextAreaCommandOrchestrator implements CommandOrchestrator {\n textArea: HTMLTextAreaElement;\n textApi: TextAreaTextApi;\n\n constructor(textArea: HTMLTextAreaElement) {\n this.textArea = textArea;\n this.textApi = new TextAreaTextApi(textArea);\n }\n\n getState() {\n if (!this.textArea) return false;\n return getStateFromTextArea(this.textArea);\n }\n\n executeCommand(\n command: ICommand<string>,\n dispatch?: React.Dispatch<ContextStore>,\n state?: ExecuteCommandState,\n shortcuts?: string[],\n ): void {\n command.execute &&\n command.execute({ command, ...getStateFromTextArea(this.textArea) }, this.textApi, dispatch, state, shortcuts);\n }\n}\n\nexport {\n title,\n title1,\n title2,\n title3,\n title4,\n title5,\n title6,\n bold,\n codeBlock,\n comment,\n italic,\n strikethrough,\n hr,\n group,\n divider,\n link,\n quote,\n code,\n image,\n unorderedListCommand,\n orderedListCommand,\n checkedListCommand,\n codeEdit,\n codeLive,\n codePreview,\n fullscreen,\n // Tool method.\n getCommands,\n getExtraCommands,\n getStateFromTextArea,\n TextAreaCommandOrchestrator,\n TextAreaTextApi,\n};\n"
|
|
62
62
|
],
|
|
63
|
-
"mappings": "
|
|
63
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AA4DA,IAAMA,WAA6B,GAAG,SAAhCA,WAA6B;EAAA,OAAS,CAC1CC,UAAI,EACJC,cAAM,EACNC,4BAAa,EACbC,MAAE,EACF,IAAAC,YAAK,EAAC,CAACC,cAAM,EAAEC,cAAM,EAAEC,cAAM,EAAEC,cAAM,EAAEC,cAAM,EAAEC,cAAM,CAAC,EAAE;IACtDC,IAAI,EAAE,OAAO;IACbC,SAAS,EAAE,OAAO;IAClBC,WAAW,EAAE;MAAE,YAAY,EAAE,cAAc;MAAEC,KAAK,EAAE;IAAe;EACrE,CAAC,CAAC,EACFC,gBAAO,EACPC,UAAI,EACJC,YAAK,EACLC,UAAI,EACJC,eAAS,EACTC,gBAAO,EACPC,YAAK,EACLN,gBAAO,EACPO,0BAAoB,EACpBC,wBAAkB,EAClBC,wBAAkB,CACnB;AAAA;AAAC;AAEF,IAAMC,gBAAkC,GAAG,SAArCA,gBAAkC;EAAA,OAAS,CAACC,iBAAQ,EAAEC,iBAAQ,EAAEC,oBAAW,EAAEb,gBAAO,EAAEc,sBAAU,CAAC;AAAA;AAAC;AAExG,SAASC,oBAAoB,CAACC,QAA6B,EAAa;EAAA;EACtE,OAAO;IACLC,SAAS,EAAE;MACTC,KAAK,EAAEF,QAAQ,CAACG,cAAc;MAC9BC,GAAG,EAAEJ,QAAQ,CAACK;IAChB,CAAC;IACDC,IAAI,EAAEN,QAAQ,CAACO,KAAK;IACpBC,YAAY,qBAAER,QAAQ,CAACO,KAAK,oDAAd,gBAAgBE,KAAK,CAACT,QAAQ,CAACG,cAAc,EAAEH,QAAQ,CAACK,YAAY;EACpF,CAAC;AACH;AAAC,IAEKK,eAAe;EAGnB,yBAAYV,QAA6B,EAAE;IAAA;IAAA;IACzC,IAAI,CAACA,QAAQ,GAAGA,QAAQ;EAC1B;;EAEA;AACF;AACA;AACA;AACA;EAJE;IAAA;IAAA,OAKA,0BAAiBM,IAAY,EAAa;MACxC,IAAAK,0CAAoB,EAAC,IAAI,CAACX,QAAQ,EAAEM,IAAI,CAAC;MACzC,OAAOP,oBAAoB,CAAC,IAAI,CAACC,QAAQ,CAAC;IAC5C;;IAEA;AACF;AACA;AACA;EAHE;IAAA;IAAA,OAIA,2BAAkBC,SAAoB,EAAa;MACjD,IAAI,CAACD,QAAQ,CAACY,KAAK,EAAE;MACrB,IAAI,CAACZ,QAAQ,CAACG,cAAc,GAAGF,SAAS,CAACC,KAAK;MAC9C,IAAI,CAACF,QAAQ,CAACK,YAAY,GAAGJ,SAAS,CAACG,GAAG;MAC1C,OAAOL,oBAAoB,CAAC,IAAI,CAACC,QAAQ,CAAC;IAC5C;EAAC;EAAA;AAAA;AAAA;AAAA,IAGGa,2BAA2B;EAI/B,qCAAYb,QAA6B,EAAE;IAAA;IAAA;IAAA;IACzC,IAAI,CAACA,QAAQ,GAAGA,QAAQ;IACxB,IAAI,CAACc,OAAO,GAAG,IAAIJ,eAAe,CAACV,QAAQ,CAAC;EAC9C;EAAC;IAAA;IAAA,OAED,oBAAW;MACT,IAAI,CAAC,IAAI,CAACA,QAAQ,EAAE,OAAO,KAAK;MAChC,OAAOD,oBAAoB,CAAC,IAAI,CAACC,QAAQ,CAAC;IAC5C;EAAC;IAAA;IAAA,OAED,wBACEe,OAAyB,EACzBC,QAAuC,EACvCC,KAA2B,EAC3BC,SAAoB,EACd;MACNH,OAAO,CAACI,OAAO,IACbJ,OAAO,CAACI,OAAO;QAAGJ,OAAO,EAAPA;MAAO,GAAKhB,oBAAoB,CAAC,IAAI,CAACC,QAAQ,CAAC,GAAI,IAAI,CAACc,OAAO,EAAEE,QAAQ,EAAEC,KAAK,EAAEC,SAAS,CAAC;IAClH;EAAC;EAAA;AAAA;AAAA"
|
|
64
64
|
}
|
package/lib/commands/italic.js
CHANGED
|
@@ -12,7 +12,7 @@ var italic = {
|
|
|
12
12
|
name: 'italic',
|
|
13
13
|
keyCommand: 'italic',
|
|
14
14
|
shortcuts: 'ctrlcmd+i',
|
|
15
|
-
value: '*
|
|
15
|
+
value: '*{{text}}*',
|
|
16
16
|
buttonProps: {
|
|
17
17
|
'aria-label': 'Add italic text (ctrl + i)',
|
|
18
18
|
title: 'Add italic text (ctrl + i)'
|
|
@@ -35,12 +35,15 @@ var italic = {
|
|
|
35
35
|
selection: state.selection
|
|
36
36
|
});
|
|
37
37
|
var state1 = api.setSelectionRange(newSelectionRange);
|
|
38
|
-
// Replaces the current selection with the
|
|
39
|
-
var
|
|
40
|
-
|
|
38
|
+
// Replaces the current selection with the bold mark up
|
|
39
|
+
var val = state.command.value || '';
|
|
40
|
+
api.replaceSelection(val.replace(/({{text}})/gi, state1.selectedText));
|
|
41
|
+
var start = state1.selection.start + val.indexOf('{{text}}');
|
|
42
|
+
var end = state1.selection.start + val.indexOf('{{text}}') + (state1.selection.end - state1.selection.start);
|
|
43
|
+
// Adjust the selection to not contain the **
|
|
41
44
|
api.setSelectionRange({
|
|
42
|
-
start:
|
|
43
|
-
end:
|
|
45
|
+
start: start,
|
|
46
|
+
end: end
|
|
44
47
|
});
|
|
45
48
|
}
|
|
46
49
|
};
|
|
@@ -18,18 +18,20 @@
|
|
|
18
18
|
"selection",
|
|
19
19
|
"state1",
|
|
20
20
|
"setSelectionRange",
|
|
21
|
-
"
|
|
21
|
+
"val",
|
|
22
|
+
"command",
|
|
22
23
|
"replaceSelection",
|
|
24
|
+
"replace",
|
|
23
25
|
"selectedText",
|
|
24
26
|
"start",
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
+
"indexOf",
|
|
28
|
+
"end"
|
|
27
29
|
],
|
|
28
30
|
"sources": [
|
|
29
31
|
"../../src/commands/italic.tsx"
|
|
30
32
|
],
|
|
31
33
|
"sourcesContent": [
|
|
32
|
-
"import * as React from 'react';\nimport { ICommand,
|
|
34
|
+
"import * as React from 'react';\nimport { ICommand, ExecuteState, TextAreaTextApi } from './';\nimport { selectWord } from '../utils/markdownUtils';\n\nexport const italic: ICommand = {\n name: 'italic',\n keyCommand: 'italic',\n shortcuts: 'ctrlcmd+i',\n value: '*{{text}}*',\n buttonProps: { 'aria-label': 'Add italic text (ctrl + i)', title: 'Add italic text (ctrl + i)' },\n icon: (\n <svg data-name=\"italic\" width=\"12\" height=\"12\" role=\"img\" viewBox=\"0 0 320 512\">\n <path\n fill=\"currentColor\"\n d=\"M204.758 416h-33.849l62.092-320h40.725a16 16 0 0 0 15.704-12.937l6.242-32C297.599 41.184 290.034 32 279.968 32H120.235a16 16 0 0 0-15.704 12.937l-6.242 32C96.362 86.816 103.927 96 113.993 96h33.846l-62.09 320H46.278a16 16 0 0 0-15.704 12.935l-6.245 32C22.402 470.815 29.967 480 40.034 480h158.479a16 16 0 0 0 15.704-12.935l6.245-32c1.927-9.88-5.638-19.065-15.704-19.065z\"\n />\n </svg>\n ),\n execute: (state: ExecuteState, api: TextAreaTextApi) => {\n // Adjust the selection to encompass the whole word if the caret is inside one\n const newSelectionRange = selectWord({ text: state.text, selection: state.selection });\n const state1 = api.setSelectionRange(newSelectionRange);\n // Replaces the current selection with the bold mark up\n const val = state.command.value || '';\n api.replaceSelection(val.replace(/({{text}})/gi, state1.selectedText));\n\n const start = state1.selection.start + val.indexOf('{{text}}');\n const end = state1.selection.start + val.indexOf('{{text}}') + (state1.selection.end - state1.selection.start);\n // Adjust the selection to not contain the **\n api.setSelectionRange({ start, end });\n },\n};\n"
|
|
33
35
|
],
|
|
34
|
-
"mappings": ";;;;;;;AAAA;AAEA;AAAoD;AAE7C,IAAMA,MAAgB,GAAG;EAC9BC,IAAI,EAAE,QAAQ;EACdC,UAAU,EAAE,QAAQ;EACpBC,SAAS,EAAE,WAAW;EACtBC,KAAK,EAAE,
|
|
36
|
+
"mappings": ";;;;;;;AAAA;AAEA;AAAoD;AAE7C,IAAMA,MAAgB,GAAG;EAC9BC,IAAI,EAAE,QAAQ;EACdC,UAAU,EAAE,QAAQ;EACpBC,SAAS,EAAE,WAAW;EACtBC,KAAK,EAAE,YAAY;EACnBC,WAAW,EAAE;IAAE,YAAY,EAAE,4BAA4B;IAAEC,KAAK,EAAE;EAA6B,CAAC;EAChGC,IAAI,eACF;IAAK,aAAU,QAAQ;IAAC,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,IAAI,EAAC,KAAK;IAAC,OAAO,EAAC,aAAa;IAAA,uBAC7E;MACE,IAAI,EAAC,cAAc;MACnB,CAAC,EAAC;IAAoX;EACtX,EAEL;EACDC,OAAO,EAAE,iBAACC,KAAmB,EAAEC,GAAoB,EAAK;IACtD;IACA,IAAMC,iBAAiB,GAAG,IAAAC,yBAAU,EAAC;MAAEC,IAAI,EAAEJ,KAAK,CAACI,IAAI;MAAEC,SAAS,EAAEL,KAAK,CAACK;IAAU,CAAC,CAAC;IACtF,IAAMC,MAAM,GAAGL,GAAG,CAACM,iBAAiB,CAACL,iBAAiB,CAAC;IACvD;IACA,IAAMM,GAAG,GAAGR,KAAK,CAACS,OAAO,CAACd,KAAK,IAAI,EAAE;IACrCM,GAAG,CAACS,gBAAgB,CAACF,GAAG,CAACG,OAAO,CAAC,cAAc,EAAEL,MAAM,CAACM,YAAY,CAAC,CAAC;IAEtE,IAAMC,KAAK,GAAGP,MAAM,CAACD,SAAS,CAACQ,KAAK,GAAGL,GAAG,CAACM,OAAO,CAAC,UAAU,CAAC;IAC9D,IAAMC,GAAG,GAAGT,MAAM,CAACD,SAAS,CAACQ,KAAK,GAAGL,GAAG,CAACM,OAAO,CAAC,UAAU,CAAC,IAAIR,MAAM,CAACD,SAAS,CAACU,GAAG,GAAGT,MAAM,CAACD,SAAS,CAACQ,KAAK,CAAC;IAC9G;IACAZ,GAAG,CAACM,iBAAiB,CAAC;MAAEM,KAAK,EAALA,KAAK;MAAEE,GAAG,EAAHA;IAAI,CAAC,CAAC;EACvC;AACF,CAAC;AAAC"
|
|
35
37
|
}
|
package/lib/commands/link.js
CHANGED
|
@@ -12,7 +12,7 @@ var link = {
|
|
|
12
12
|
name: 'link',
|
|
13
13
|
keyCommand: 'link',
|
|
14
14
|
shortcuts: 'ctrlcmd+l',
|
|
15
|
-
value: '[](
|
|
15
|
+
value: '[{{text}}](URL Here)',
|
|
16
16
|
buttonProps: {
|
|
17
17
|
'aria-label': 'Add a link (ctrl + l)',
|
|
18
18
|
title: 'Add a link (ctrl + l)'
|
|
@@ -35,12 +35,15 @@ var link = {
|
|
|
35
35
|
selection: state.selection
|
|
36
36
|
});
|
|
37
37
|
var state1 = api.setSelectionRange(newSelectionRange);
|
|
38
|
+
var val = state.command.value || '';
|
|
38
39
|
// Replaces the current selection with the bold mark up
|
|
39
|
-
|
|
40
|
+
api.replaceSelection(val.replace(/({{text}})/gi, state1.selectedText));
|
|
41
|
+
var start = state1.selection.start + val.indexOf('{{text}}');
|
|
42
|
+
var end = state1.selection.start + val.indexOf('{{text}}') + (state1.selection.end - state1.selection.start);
|
|
40
43
|
// Adjust the selection to not contain the **
|
|
41
44
|
api.setSelectionRange({
|
|
42
|
-
start:
|
|
43
|
-
end:
|
|
45
|
+
start: start,
|
|
46
|
+
end: end
|
|
44
47
|
});
|
|
45
48
|
}
|
|
46
49
|
};
|
package/lib/commands/link.js.map
CHANGED
|
@@ -18,18 +18,20 @@
|
|
|
18
18
|
"selection",
|
|
19
19
|
"state1",
|
|
20
20
|
"setSelectionRange",
|
|
21
|
-
"
|
|
21
|
+
"val",
|
|
22
|
+
"command",
|
|
22
23
|
"replaceSelection",
|
|
24
|
+
"replace",
|
|
23
25
|
"selectedText",
|
|
24
26
|
"start",
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
+
"indexOf",
|
|
28
|
+
"end"
|
|
27
29
|
],
|
|
28
30
|
"sources": [
|
|
29
31
|
"../../src/commands/link.tsx"
|
|
30
32
|
],
|
|
31
33
|
"sourcesContent": [
|
|
32
|
-
"import * as React from 'react';\nimport { ICommand,
|
|
34
|
+
"import * as React from 'react';\nimport { ICommand, ExecuteState, TextAreaTextApi } from './';\nimport { selectWord } from '../utils/markdownUtils';\n\nexport const link: ICommand = {\n name: 'link',\n keyCommand: 'link',\n shortcuts: 'ctrlcmd+l',\n value: '[{{text}}](URL Here)',\n buttonProps: { 'aria-label': 'Add a link (ctrl + l)', title: 'Add a link (ctrl + l)' },\n icon: (\n <svg data-name=\"italic\" width=\"12\" height=\"12\" role=\"img\" viewBox=\"0 0 520 520\">\n <path\n fill=\"currentColor\"\n d=\"M331.751196,182.121107 C392.438214,241.974735 391.605313,337.935283 332.11686,396.871226 C332.005129,396.991316 331.873084,397.121413 331.751196,397.241503 L263.493918,464.491645 C203.291404,523.80587 105.345257,523.797864 45.151885,464.491645 C-15.0506283,405.187427 -15.0506283,308.675467 45.151885,249.371249 L82.8416853,212.237562 C92.836501,202.39022 110.049118,208.9351 110.56511,222.851476 C111.223305,240.5867 114.451306,258.404985 120.407566,275.611815 C122.424812,281.438159 120.983487,287.882964 116.565047,292.23621 L103.272145,305.332975 C74.8052033,333.379887 73.9123737,379.047937 102.098973,407.369054 C130.563883,435.969378 177.350591,436.139505 206.033884,407.879434 L274.291163,340.6393 C302.9257,312.427264 302.805844,266.827265 274.291163,238.733318 C270.531934,235.036561 266.74528,232.16442 263.787465,230.157924 C259.544542,227.2873 256.928256,222.609848 256.731165,217.542518 C256.328935,206.967633 260.13184,196.070508 268.613213,187.714278 L289.998463,166.643567 C295.606326,161.118448 304.403592,160.439942 310.906317,164.911276 C318.353355,170.034591 325.328531,175.793397 331.751196,182.121107 Z M240.704978,55.4828366 L172.447607,122.733236 C172.325719,122.853326 172.193674,122.983423 172.081943,123.103513 C117.703294,179.334654 129.953294,261.569283 185.365841,328.828764 C191.044403,335.721376 198.762988,340.914712 206.209732,346.037661 C212.712465,350.509012 221.510759,349.829503 227.117615,344.305363 L248.502893,323.234572 C256.984277,314.87831 260.787188,303.981143 260.384957,293.406218 C260.187865,288.338869 257.571576,283.661398 253.328648,280.790763 C250.370829,278.78426 246.58417,275.912107 242.824936,272.215337 C214.310216,244.121282 206.209732,204.825874 229.906702,179.334654 L298.164073,112.094263 C326.847404,83.8340838 373.633159,84.0042113 402.099123,112.604645 C430.285761,140.92587 429.393946,186.594095 400.92595,214.641114 L387.63303,227.737929 C383.214584,232.091191 381.773257,238.536021 383.790506,244.362388 C389.746774,261.569283 392.974779,279.387637 393.632975,297.122928 C394.149984,311.039357 411.361608,317.584262 421.356437,307.736882 L459.046288,270.603053 C519.249898,211.29961 519.249898,114.787281 459.047304,55.4828366 C398.853851,-3.82360914 300.907572,-3.83161514 240.704978,55.4828366 Z\"\n />\n </svg>\n ),\n execute: (state: ExecuteState, api: TextAreaTextApi) => {\n // Adjust the selection to encompass the whole word if the caret is inside one\n const newSelectionRange = selectWord({ text: state.text, selection: state.selection });\n const state1 = api.setSelectionRange(newSelectionRange);\n const val = state.command.value || '';\n // Replaces the current selection with the bold mark up\n api.replaceSelection(val.replace(/({{text}})/gi, state1.selectedText));\n const start = state1.selection.start + val.indexOf('{{text}}');\n const end = state1.selection.start + val.indexOf('{{text}}') + (state1.selection.end - state1.selection.start);\n // Adjust the selection to not contain the **\n api.setSelectionRange({ start, end });\n },\n};\n"
|
|
33
35
|
],
|
|
34
|
-
"mappings": ";;;;;;;AAAA;AAEA;AAAoD;AAE7C,IAAMA,IAAc,GAAG;EAC5BC,IAAI,EAAE,MAAM;EACZC,UAAU,EAAE,MAAM;EAClBC,SAAS,EAAE,WAAW;EACtBC,KAAK,EAAE,
|
|
36
|
+
"mappings": ";;;;;;;AAAA;AAEA;AAAoD;AAE7C,IAAMA,IAAc,GAAG;EAC5BC,IAAI,EAAE,MAAM;EACZC,UAAU,EAAE,MAAM;EAClBC,SAAS,EAAE,WAAW;EACtBC,KAAK,EAAE,sBAAsB;EAC7BC,WAAW,EAAE;IAAE,YAAY,EAAE,uBAAuB;IAAEC,KAAK,EAAE;EAAwB,CAAC;EACtFC,IAAI,eACF;IAAK,aAAU,QAAQ;IAAC,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,IAAI,EAAC,KAAK;IAAC,OAAO,EAAC,aAAa;IAAA,uBAC7E;MACE,IAAI,EAAC,cAAc;MACnB,CAAC,EAAC;IAA2tE;EAC7tE,EAEL;EACDC,OAAO,EAAE,iBAACC,KAAmB,EAAEC,GAAoB,EAAK;IACtD;IACA,IAAMC,iBAAiB,GAAG,IAAAC,yBAAU,EAAC;MAAEC,IAAI,EAAEJ,KAAK,CAACI,IAAI;MAAEC,SAAS,EAAEL,KAAK,CAACK;IAAU,CAAC,CAAC;IACtF,IAAMC,MAAM,GAAGL,GAAG,CAACM,iBAAiB,CAACL,iBAAiB,CAAC;IACvD,IAAMM,GAAG,GAAGR,KAAK,CAACS,OAAO,CAACd,KAAK,IAAI,EAAE;IACrC;IACAM,GAAG,CAACS,gBAAgB,CAACF,GAAG,CAACG,OAAO,CAAC,cAAc,EAAEL,MAAM,CAACM,YAAY,CAAC,CAAC;IACtE,IAAMC,KAAK,GAAGP,MAAM,CAACD,SAAS,CAACQ,KAAK,GAAGL,GAAG,CAACM,OAAO,CAAC,UAAU,CAAC;IAC9D,IAAMC,GAAG,GAAGT,MAAM,CAACD,SAAS,CAACQ,KAAK,GAAGL,GAAG,CAACM,OAAO,CAAC,UAAU,CAAC,IAAIR,MAAM,CAACD,SAAS,CAACU,GAAG,GAAGT,MAAM,CAACD,SAAS,CAACQ,KAAK,CAAC;IAC9G;IACAZ,GAAG,CAACM,iBAAiB,CAAC;MAAEM,KAAK,EAALA,KAAK;MAAEE,GAAG,EAAHA;IAAI,CAAC,CAAC;EACvC;AACF,CAAC;AAAC"
|
|
35
37
|
}
|
|
@@ -16,7 +16,7 @@ var strikethrough = {
|
|
|
16
16
|
'aria-label': 'Add strikethrough text (ctrl + shift + x)',
|
|
17
17
|
title: 'Add strikethrough text (ctrl + shift + x)'
|
|
18
18
|
},
|
|
19
|
-
value: '~~',
|
|
19
|
+
value: '~~{{text}}~~',
|
|
20
20
|
icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
|
|
21
21
|
"data-name": "strikethrough",
|
|
22
22
|
width: "12",
|
|
@@ -35,12 +35,15 @@ var strikethrough = {
|
|
|
35
35
|
selection: state.selection
|
|
36
36
|
});
|
|
37
37
|
var state1 = api.setSelectionRange(newSelectionRange);
|
|
38
|
-
// Replaces the current selection with the
|
|
39
|
-
var
|
|
40
|
-
|
|
38
|
+
// Replaces the current selection with the bold mark up
|
|
39
|
+
var val = state.command.value || '';
|
|
40
|
+
api.replaceSelection(val.replace(/({{text}})/gi, state1.selectedText));
|
|
41
|
+
var start = state1.selection.start + val.indexOf('{{text}}');
|
|
42
|
+
var end = state1.selection.start + val.indexOf('{{text}}') + (state1.selection.end - state1.selection.start);
|
|
43
|
+
// Adjust the selection to not contain the **
|
|
41
44
|
api.setSelectionRange({
|
|
42
|
-
start:
|
|
43
|
-
end:
|
|
45
|
+
start: start,
|
|
46
|
+
end: end
|
|
44
47
|
});
|
|
45
48
|
}
|
|
46
49
|
};
|
|
@@ -18,18 +18,20 @@
|
|
|
18
18
|
"selection",
|
|
19
19
|
"state1",
|
|
20
20
|
"setSelectionRange",
|
|
21
|
-
"
|
|
21
|
+
"val",
|
|
22
|
+
"command",
|
|
22
23
|
"replaceSelection",
|
|
24
|
+
"replace",
|
|
23
25
|
"selectedText",
|
|
24
26
|
"start",
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
+
"indexOf",
|
|
28
|
+
"end"
|
|
27
29
|
],
|
|
28
30
|
"sources": [
|
|
29
31
|
"../../src/commands/strikeThrough.tsx"
|
|
30
32
|
],
|
|
31
33
|
"sourcesContent": [
|
|
32
|
-
"import * as React from 'react';\nimport { ICommand,
|
|
34
|
+
"import * as React from 'react';\nimport { ICommand, ExecuteState, TextAreaTextApi } from './';\nimport { selectWord } from '../utils/markdownUtils';\n\nexport const strikethrough: ICommand = {\n name: 'strikethrough',\n keyCommand: 'strikethrough',\n shortcuts: 'ctrl+shift+x',\n buttonProps: {\n 'aria-label': 'Add strikethrough text (ctrl + shift + x)',\n title: 'Add strikethrough text (ctrl + shift + x)',\n },\n value: '~~{{text}}~~',\n icon: (\n <svg data-name=\"strikethrough\" width=\"12\" height=\"12\" role=\"img\" viewBox=\"0 0 512 512\">\n <path\n fill=\"currentColor\"\n d=\"M496 288H16c-8.837 0-16-7.163-16-16v-32c0-8.837 7.163-16 16-16h480c8.837 0 16 7.163 16 16v32c0 8.837-7.163 16-16 16zm-214.666 16c27.258 12.937 46.524 28.683 46.524 56.243 0 33.108-28.977 53.676-75.621 53.676-32.325 0-76.874-12.08-76.874-44.271V368c0-8.837-7.164-16-16-16H113.75c-8.836 0-16 7.163-16 16v19.204c0 66.845 77.717 101.82 154.487 101.82 88.578 0 162.013-45.438 162.013-134.424 0-19.815-3.618-36.417-10.143-50.6H281.334zm-30.952-96c-32.422-13.505-56.836-28.946-56.836-59.683 0-33.92 30.901-47.406 64.962-47.406 42.647 0 64.962 16.593 64.962 32.985V136c0 8.837 7.164 16 16 16h45.613c8.836 0 16-7.163 16-16v-30.318c0-52.438-71.725-79.875-142.575-79.875-85.203 0-150.726 40.972-150.726 125.646 0 22.71 4.665 41.176 12.777 56.547h129.823z\"\n />\n </svg>\n ),\n execute: (state: ExecuteState, api: TextAreaTextApi) => {\n // Adjust the selection to encompass the whole word if the caret is inside one\n const newSelectionRange = selectWord({ text: state.text, selection: state.selection });\n const state1 = api.setSelectionRange(newSelectionRange);\n // Replaces the current selection with the bold mark up\n const val = state.command.value || '';\n api.replaceSelection(val.replace(/({{text}})/gi, state1.selectedText));\n\n const start = state1.selection.start + val.indexOf('{{text}}');\n const end = state1.selection.start + val.indexOf('{{text}}') + (state1.selection.end - state1.selection.start);\n // Adjust the selection to not contain the **\n api.setSelectionRange({ start, end });\n },\n};\n"
|
|
33
35
|
],
|
|
34
|
-
"mappings": ";;;;;;;AAAA;AAEA;AAAoD;AAE7C,IAAMA,aAAuB,GAAG;EACrCC,IAAI,EAAE,eAAe;EACrBC,UAAU,EAAE,eAAe;EAC3BC,SAAS,EAAE,cAAc;EACzBC,WAAW,EAAE;IACX,YAAY,EAAE,2CAA2C;IACzDC,KAAK,EAAE;EACT,CAAC;EACDC,KAAK,EAAE,
|
|
36
|
+
"mappings": ";;;;;;;AAAA;AAEA;AAAoD;AAE7C,IAAMA,aAAuB,GAAG;EACrCC,IAAI,EAAE,eAAe;EACrBC,UAAU,EAAE,eAAe;EAC3BC,SAAS,EAAE,cAAc;EACzBC,WAAW,EAAE;IACX,YAAY,EAAE,2CAA2C;IACzDC,KAAK,EAAE;EACT,CAAC;EACDC,KAAK,EAAE,cAAc;EACrBC,IAAI,eACF;IAAK,aAAU,eAAe;IAAC,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,IAAI,EAAC,KAAK;IAAC,OAAO,EAAC,aAAa;IAAA,uBACpF;MACE,IAAI,EAAC,cAAc;MACnB,CAAC,EAAC;IAAyuB;EAC3uB,EAEL;EACDC,OAAO,EAAE,iBAACC,KAAmB,EAAEC,GAAoB,EAAK;IACtD;IACA,IAAMC,iBAAiB,GAAG,IAAAC,yBAAU,EAAC;MAAEC,IAAI,EAAEJ,KAAK,CAACI,IAAI;MAAEC,SAAS,EAAEL,KAAK,CAACK;IAAU,CAAC,CAAC;IACtF,IAAMC,MAAM,GAAGL,GAAG,CAACM,iBAAiB,CAACL,iBAAiB,CAAC;IACvD;IACA,IAAMM,GAAG,GAAGR,KAAK,CAACS,OAAO,CAACZ,KAAK,IAAI,EAAE;IACrCI,GAAG,CAACS,gBAAgB,CAACF,GAAG,CAACG,OAAO,CAAC,cAAc,EAAEL,MAAM,CAACM,YAAY,CAAC,CAAC;IAEtE,IAAMC,KAAK,GAAGP,MAAM,CAACD,SAAS,CAACQ,KAAK,GAAGL,GAAG,CAACM,OAAO,CAAC,UAAU,CAAC;IAC9D,IAAMC,GAAG,GAAGT,MAAM,CAACD,SAAS,CAACQ,KAAK,GAAGL,GAAG,CAACM,OAAO,CAAC,UAAU,CAAC,IAAIR,MAAM,CAACD,SAAS,CAACU,GAAG,GAAGT,MAAM,CAACD,SAAS,CAACQ,KAAK,CAAC;IAC9G;IACAZ,GAAG,CAACM,iBAAiB,CAAC;MAAEM,KAAK,EAALA,KAAK;MAAEE,GAAG,EAAHA;IAAI,CAAC,CAAC;EACvC;AACF,CAAC;AAAC"
|
|
35
37
|
}
|
package/markdown-editor.css
CHANGED
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
box-sizing: border-box;
|
|
31
31
|
padding: 10px;
|
|
32
32
|
margin: 0;
|
|
33
|
-
font-size: 14px;
|
|
34
|
-
line-height: 18px;
|
|
33
|
+
font-size: 14px !important;
|
|
34
|
+
line-height: 18px !important;
|
|
35
35
|
-webkit-font-variant-ligatures: common-ligatures;
|
|
36
36
|
font-variant-ligatures: common-ligatures;
|
|
37
37
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uiw/react-md-editor",
|
|
3
|
-
"version": "3.20.
|
|
3
|
+
"version": "3.20.5",
|
|
4
4
|
"description": "A markdown editor with preview, implemented with React.js and TypeScript.",
|
|
5
5
|
"homepage": "https://uiwjs.github.io/react-md-editor/",
|
|
6
6
|
"author": "kenny wang <wowohoo@qq.com>",
|
package/src/commands/bold.tsx
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ICommand,
|
|
2
|
+
import { ICommand, ExecuteState, TextAreaTextApi } from './';
|
|
3
3
|
import { selectWord } from '../utils/markdownUtils';
|
|
4
4
|
|
|
5
5
|
export const bold: ICommand = {
|
|
6
6
|
name: 'bold',
|
|
7
7
|
keyCommand: 'bold',
|
|
8
8
|
shortcuts: 'ctrlcmd+b',
|
|
9
|
-
value: '**',
|
|
9
|
+
value: '**{{text}}**',
|
|
10
10
|
buttonProps: { 'aria-label': 'Add bold text (ctrl + b)', title: 'Add bold text (ctrl + b)' },
|
|
11
11
|
icon: (
|
|
12
12
|
<svg role="img" width="12" height="12" viewBox="0 0 384 512">
|
|
@@ -16,16 +16,17 @@ export const bold: ICommand = {
|
|
|
16
16
|
/>
|
|
17
17
|
</svg>
|
|
18
18
|
),
|
|
19
|
-
execute: (state:
|
|
19
|
+
execute: (state: ExecuteState, api: TextAreaTextApi) => {
|
|
20
20
|
// Adjust the selection to encompass the whole word if the caret is inside one
|
|
21
21
|
const newSelectionRange = selectWord({ text: state.text, selection: state.selection });
|
|
22
22
|
const state1 = api.setSelectionRange(newSelectionRange);
|
|
23
23
|
// Replaces the current selection with the bold mark up
|
|
24
|
-
const
|
|
24
|
+
const val = state.command.value || '';
|
|
25
|
+
api.replaceSelection(val.replace(/({{text}})/gi, state1.selectedText));
|
|
26
|
+
|
|
27
|
+
const start = state1.selection.start + val.indexOf('{{text}}');
|
|
28
|
+
const end = state1.selection.start + val.indexOf('{{text}}') + (state1.selection.end - state1.selection.start);
|
|
25
29
|
// Adjust the selection to not contain the **
|
|
26
|
-
api.setSelectionRange({
|
|
27
|
-
start: state2.selection.end - 2 - state1.selectedText?.length,
|
|
28
|
-
end: state2.selection.end - 2,
|
|
29
|
-
});
|
|
30
|
+
api.setSelectionRange({ start, end });
|
|
30
31
|
},
|
|
31
32
|
};
|
package/src/commands/hr.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { ICommand,
|
|
2
|
+
import { ICommand, ExecuteState, TextAreaTextApi } from './';
|
|
3
3
|
|
|
4
4
|
export const hr: ICommand = {
|
|
5
5
|
name: 'hr',
|
|
@@ -16,7 +16,7 @@ export const hr: ICommand = {
|
|
|
16
16
|
/>
|
|
17
17
|
</svg>
|
|
18
18
|
),
|
|
19
|
-
execute: (state:
|
|
20
|
-
api.replaceSelection(`${state.selectedText}\n\n
|
|
19
|
+
execute: (state: ExecuteState, api: TextAreaTextApi) => {
|
|
20
|
+
api.replaceSelection(`${state.selectedText}\n\n${state.command.value || ''}-\n\n`);
|
|
21
21
|
},
|
|
22
22
|
};
|
package/src/commands/image.tsx
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { ICommand,
|
|
2
|
+
import { ICommand, ExecuteState, TextAreaTextApi } from './';
|
|
3
3
|
import { selectWord } from '../utils/markdownUtils';
|
|
4
4
|
|
|
5
5
|
export const image: ICommand = {
|
|
6
6
|
name: 'image',
|
|
7
7
|
keyCommand: 'image',
|
|
8
8
|
shortcuts: 'ctrlcmd+k',
|
|
9
|
-
value: '![image]()',
|
|
9
|
+
value: '',
|
|
10
10
|
buttonProps: { 'aria-label': 'Add image (ctrl + k)', title: 'Add image (ctrl + k)' },
|
|
11
11
|
icon: (
|
|
12
12
|
<svg width="13" height="13" viewBox="0 0 20 20">
|
|
@@ -16,17 +16,20 @@ export const image: ICommand = {
|
|
|
16
16
|
/>
|
|
17
17
|
</svg>
|
|
18
18
|
),
|
|
19
|
-
execute: (state:
|
|
19
|
+
execute: (state: ExecuteState, api: TextAreaTextApi) => {
|
|
20
20
|
// Select everything
|
|
21
21
|
const newSelectionRange = selectWord({ text: state.text, selection: state.selection });
|
|
22
22
|
const state1 = api.setSelectionRange(newSelectionRange);
|
|
23
23
|
// Replaces the current selection with the image
|
|
24
24
|
const imageTemplate = state1.selectedText || 'https://example.com/your-image.png';
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
25
|
+
const val = state.command.value || '';
|
|
26
|
+
api.replaceSelection(val.replace(/({{text}})/gi, imageTemplate));
|
|
27
|
+
|
|
28
|
+
const start = state1.selection.start + val.indexOf('{{text}}');
|
|
29
|
+
let end = state1.selection.start + val.indexOf('{{text}}') + (state1.selection.end - state1.selection.start);
|
|
30
|
+
if (!state1.selectedText) {
|
|
31
|
+
end = end + imageTemplate.length;
|
|
32
|
+
}
|
|
33
|
+
api.setSelectionRange({ start, end });
|
|
31
34
|
},
|
|
32
35
|
};
|
package/src/commands/index.ts
CHANGED
|
@@ -58,7 +58,7 @@ export interface ICommandBase<T> {
|
|
|
58
58
|
index: number,
|
|
59
59
|
) => void | undefined | null | React.ReactElement;
|
|
60
60
|
execute?: (
|
|
61
|
-
state:
|
|
61
|
+
state: ExecuteState,
|
|
62
62
|
api: TextAreaTextApi,
|
|
63
63
|
dispatch?: React.Dispatch<ContextStore>,
|
|
64
64
|
executeCommandState?: ExecuteCommandState,
|
|
@@ -66,6 +66,8 @@ export interface ICommandBase<T> {
|
|
|
66
66
|
) => void;
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
+
export type ExecuteState = TextState & { command: ICommand };
|
|
70
|
+
|
|
69
71
|
export type ICommand<T = string> = ICommandChildCommands<T> | ICommandChildHandle<T>;
|
|
70
72
|
|
|
71
73
|
export interface TextRange {
|
|
@@ -164,7 +166,8 @@ class TextAreaCommandOrchestrator implements CommandOrchestrator {
|
|
|
164
166
|
state?: ExecuteCommandState,
|
|
165
167
|
shortcuts?: string[],
|
|
166
168
|
): void {
|
|
167
|
-
command.execute &&
|
|
169
|
+
command.execute &&
|
|
170
|
+
command.execute({ command, ...getStateFromTextArea(this.textArea) }, this.textApi, dispatch, state, shortcuts);
|
|
168
171
|
}
|
|
169
172
|
}
|
|
170
173
|
|
package/src/commands/italic.tsx
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { ICommand,
|
|
2
|
+
import { ICommand, ExecuteState, TextAreaTextApi } from './';
|
|
3
3
|
import { selectWord } from '../utils/markdownUtils';
|
|
4
4
|
|
|
5
5
|
export const italic: ICommand = {
|
|
6
6
|
name: 'italic',
|
|
7
7
|
keyCommand: 'italic',
|
|
8
8
|
shortcuts: 'ctrlcmd+i',
|
|
9
|
-
value: '*
|
|
9
|
+
value: '*{{text}}*',
|
|
10
10
|
buttonProps: { 'aria-label': 'Add italic text (ctrl + i)', title: 'Add italic text (ctrl + i)' },
|
|
11
11
|
icon: (
|
|
12
12
|
<svg data-name="italic" width="12" height="12" role="img" viewBox="0 0 320 512">
|
|
@@ -16,16 +16,17 @@ export const italic: ICommand = {
|
|
|
16
16
|
/>
|
|
17
17
|
</svg>
|
|
18
18
|
),
|
|
19
|
-
execute: (state:
|
|
19
|
+
execute: (state: ExecuteState, api: TextAreaTextApi) => {
|
|
20
20
|
// Adjust the selection to encompass the whole word if the caret is inside one
|
|
21
21
|
const newSelectionRange = selectWord({ text: state.text, selection: state.selection });
|
|
22
22
|
const state1 = api.setSelectionRange(newSelectionRange);
|
|
23
|
-
// Replaces the current selection with the
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
23
|
+
// Replaces the current selection with the bold mark up
|
|
24
|
+
const val = state.command.value || '';
|
|
25
|
+
api.replaceSelection(val.replace(/({{text}})/gi, state1.selectedText));
|
|
26
|
+
|
|
27
|
+
const start = state1.selection.start + val.indexOf('{{text}}');
|
|
28
|
+
const end = state1.selection.start + val.indexOf('{{text}}') + (state1.selection.end - state1.selection.start);
|
|
29
|
+
// Adjust the selection to not contain the **
|
|
30
|
+
api.setSelectionRange({ start, end });
|
|
30
31
|
},
|
|
31
32
|
};
|