@uiw/react-md-editor 3.20.4 → 3.20.6

package/lib/commands/title6.js

@@ -1,11 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.title6 = void 0;
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _InsertTextAtPosition = require("../utils/InsertTextAtPosition");
 var _jsxRuntime = require("react/jsx-runtime");
 var title6 = {
@@ -32,5 +32,4 @@ var title6 = {
     }
   }
 };
-exports.title6 = title6;
-//# sourceMappingURL=title6.js.map
+exports.title6 = title6;

package/lib/components/DragBar/index.js

@@ -83,5 +83,4 @@ var DragBar = function DragBar(props) {
 };
 var _default = DragBar;
 exports["default"] = _default;
-module.exports = exports.default;
-//# sourceMappingURL=index.js.map
+module.exports = exports.default;

package/lib/components/TextArea/Markdown.js

@@ -71,5 +71,4 @@ function Markdown(props) {
     }
   });
 }
-module.exports = exports.default;
-//# sourceMappingURL=Markdown.js.map
+module.exports = exports.default;

package/lib/components/TextArea/Textarea.js

@@ -87,5 +87,4 @@ function Textarea(props) {
     }
   }));
 }
-module.exports = exports.default;
-//# sourceMappingURL=Textarea.js.map
+module.exports = exports.default;

package/lib/components/TextArea/handleKeyDown.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export default function handleKeyDown(e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>, tabSize?: number, defaultTabEnable?: boolean): void;

package/lib/components/TextArea/handleKeyDown.js

@@ -83,5 +83,4 @@ function handleKeyDown(e) {
     return (0, _InsertTextAtPosition.insertTextAtPosition)(target, startStr);
   }
 }
-module.exports = exports.default;
-//# sourceMappingURL=handleKeyDown.js.map
+module.exports = exports.default;

package/lib/components/TextArea/index.d.ts

@@ -4,7 +4,7 @@ import { TextAreaProps } from './Textarea';
 import { IProps } from '../../Editor';
 import { TextAreaCommandOrchestrator, ICommand } from '../../commands';
 import './index.less';
-declare type RenderTextareaHandle = {
+type RenderTextareaHandle = {
     dispatch: ContextStore['dispatch'];
     onChange?: TextAreaProps['onChange'];
     useContext?: {
@@ -19,7 +19,7 @@ export interface ITextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTe
     onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
     renderTextarea?: (props: React.TextareaHTMLAttributes<HTMLTextAreaElement> | React.HTMLAttributes<HTMLDivElement>, opts: RenderTextareaHandle) => JSX.Element;
 }
-export declare type TextAreaRef = {
+export type TextAreaRef = {
     text?: HTMLTextAreaElement;
     warp?: HTMLDivElement;
 };

package/lib/components/TextArea/index.js

@@ -99,5 +99,4 @@ function TextArea(props) {
     })
   });
 }
-module.exports = exports.default;
-//# sourceMappingURL=index.js.map
+module.exports = exports.default;

package/lib/components/TextArea/shortcuts.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ICommand, TextAreaCommandOrchestrator } from '../../commands';
 import { ContextStore, ExecuteCommandState } from '../../Context';
 export default function shortcutsHandle(e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>, commands?: ICommand[], commandOrchestrator?: TextAreaCommandOrchestrator, dispatch?: React.Dispatch<ContextStore>, state?: ExecuteCommandState): void;

package/lib/components/TextArea/shortcuts.js

@@ -66,5 +66,4 @@ function shortcutsHandle(e) {
     return;
   }
 }
-module.exports = exports.default;
-//# sourceMappingURL=shortcuts.js.map
+module.exports = exports.default;

package/lib/components/Toolbar/Child.d.ts

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import './Child.less';
 import { IToolbarProps } from './';
-export declare type ChildProps = IToolbarProps & {
+export type ChildProps = IToolbarProps & {
     children?: JSX.Element;
     groupName?: string;
 };

package/lib/components/Toolbar/Child.js

@@ -36,5 +36,4 @@ function Child(props) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [commands, barPopup, groupName, prefixCls]);
 }
-module.exports = exports.default;
-//# sourceMappingURL=Child.js.map
+module.exports = exports.default;

package/lib/components/Toolbar/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IProps } from '../../Editor';
 import { ICommand } from '../../commands';
 import './index.less';

package/lib/components/Toolbar/index.js

@@ -134,5 +134,4 @@ function Toolbar() {
       commands: extraCommands || []
     }))]
   });
-}
-//# sourceMappingURL=index.js.map
+}

package/lib/index.js

@@ -60,5 +60,4 @@ Object.keys(_Context).forEach(function (key) {
   });
 });
 var _default = _Editor["default"];
-exports["default"] = _default;
-//# sourceMappingURL=index.js.map
+exports["default"] = _default;

package/lib/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/lib/utils/InsertTextAtPosition.js

@@ -142,5 +142,4 @@ function insertTextAtPosition(input, text) {
     e.initEvent('input', true, false);
     input.dispatchEvent(e);
   }
-}
-//# sourceMappingURL=InsertTextAtPosition.js.map
+}

package/lib/utils/markdownUtils.js

@@ -112,5 +112,4 @@ function getSurroundingWord(text, position) {
     start: start,
     end: end
   };
-}
-//# sourceMappingURL=markdownUtils.js.map
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "3.20.4",
+  "version": "3.20.6",
   "description": "A markdown editor with preview, implemented with React.js and TypeScript.",
   "homepage": "https://uiwjs.github.io/react-md-editor/",
   "author": "kenny wang <wowohoo@qq.com>",

package/src/Editor.tsx

@@ -265,6 +265,10 @@ const InternalMDEditor = (
     () => height !== state.height && onHeightChange && onHeightChange(state.height, height, state),
     [height, onHeightChange, state],
   );
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useMemo(() => commands !== state.commands && dispatch({ commands: cmds }), [props.commands]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useMemo(() => extraCommands !== state.extraCommands && dispatch({ extraCommands: extraCmds }), [props.extraCommands]);
 
   const textareaDomRef = useRef<HTMLDivElement>();
   const active = useRef<'text' | 'preview'>('preview');

package/src/__test__/commands.test.tsx

@@ -152,7 +152,7 @@ it('MDEditor commands HR', async () => {
     }),
   );
   const inputNode = screen.getByTitle('test');
-  expect(inputNode).toHaveValue('\n\n----------\n\ntitle');
+  expect(inputNode).toHaveValue('\n\n-----------\n\ntitle');
 });
 
 it('MDEditor commands strikethrough text', async () => {
@@ -206,7 +206,7 @@ it('MDEditor commands link', async () => {
     }),
   );
   const inputNode = screen.getByTitle('test');
-  expect(inputNode).toHaveValue('[title](url)');
+  expect(inputNode).toHaveValue('[title](URL Here)');
 });
 
 it('MDEditor commands image', async () => {
@@ -233,7 +233,7 @@ it('MDEditor commands image', async () => {
     }),
   );
   const inputNode = screen.getByTitle('test');
-  expect(inputNode).toHaveValue('![](title)');
+  expect(inputNode).toHaveValue('![image](title)');
 });
 
 it("MDEditor commands image === ''", async () => {
@@ -260,7 +260,7 @@ it("MDEditor commands image === ''", async () => {
     }),
   );
   const inputNode = screen.getByTitle('test');
-  expect(inputNode).toHaveValue('![](https://example.com/your-image.png)');
+  expect(inputNode).toHaveValue('![image](https://example.com/your-image.png)');
 });
 
 it('MDEditor commands Add unordered list', async () => {

package/src/commands/bold.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { ICommand, TextState, TextAreaTextApi } from './';
+import { ICommand, ExecuteState, TextAreaTextApi } from './';
 import { selectWord } from '../utils/markdownUtils';
 
 export const bold: ICommand = {
   name: 'bold',
   keyCommand: 'bold',
   shortcuts: 'ctrlcmd+b',
-  value: '**',
+  value: '**{{text}}**',
   buttonProps: { 'aria-label': 'Add bold text (ctrl + b)', title: 'Add bold text (ctrl + b)' },
   icon: (
     <svg role="img" width="12" height="12" viewBox="0 0 384 512">
@@ -16,16 +16,17 @@ export const bold: ICommand = {
       />
     </svg>
   ),
-  execute: (state: TextState, api: TextAreaTextApi) => {
+  execute: (state: ExecuteState, api: TextAreaTextApi) => {
     // Adjust the selection to encompass the whole word if the caret is inside one
     const newSelectionRange = selectWord({ text: state.text, selection: state.selection });
     const state1 = api.setSelectionRange(newSelectionRange);
     // Replaces the current selection with the bold mark up
-    const state2 = api.replaceSelection(`**${state1.selectedText}**`);
+    const val = state.command.value || '';
+    api.replaceSelection(val.replace(/({{text}})/gi, state1.selectedText));
+
+    const start = state1.selection.start + val.indexOf('{{text}}');
+    const end = state1.selection.start + val.indexOf('{{text}}') + (state1.selection.end - state1.selection.start);
     // Adjust the selection to not contain the **
-    api.setSelectionRange({
-      start: state2.selection.end - 2 - state1.selectedText?.length,
-      end: state2.selection.end - 2,
-    });
+    api.setSelectionRange({ start, end });
   },
 };

package/src/commands/code.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { ICommand, TextState, TextAreaTextApi } from './';
 import {
   selectWord,

package/src/commands/comment.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ICommand, TextState, TextAreaTextApi } from './';
 import { selectWord } from '../utils/markdownUtils';
 

package/src/commands/divider.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ICommand } from './';
 
 export const divider: ICommand = {

package/src/commands/fullscreen.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { ICommand, TextState, TextAreaTextApi } from './';
 import { ContextStore, ExecuteCommandState } from '../Context';
 

package/src/commands/hr.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { ICommand, TextState, TextAreaTextApi } from './';
+import React from 'react';
+import { ICommand, ExecuteState, TextAreaTextApi } from './';
 
 export const hr: ICommand = {
   name: 'hr',
@@ -16,7 +16,7 @@ export const hr: ICommand = {
       />
     </svg>
   ),
-  execute: (state: TextState, api: TextAreaTextApi) => {
-    api.replaceSelection(`${state.selectedText}\n\n----------\n\n`);
+  execute: (state: ExecuteState, api: TextAreaTextApi) => {
+    api.replaceSelection(`${state.selectedText}\n\n${state.command.value || ''}-\n\n`);
   },
 };

package/src/commands/image.tsx

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import { ICommand, TextState, TextAreaTextApi } from './';
+import React from 'react';
+import { ICommand, ExecuteState, TextAreaTextApi } from './';
 import { selectWord } from '../utils/markdownUtils';
 
 export const image: ICommand = {
   name: 'image',
   keyCommand: 'image',
   shortcuts: 'ctrlcmd+k',
-  value: '![image]()',
+  value: '![image]({{text}})',
   buttonProps: { 'aria-label': 'Add image (ctrl + k)', title: 'Add image (ctrl + k)' },
   icon: (
     <svg width="13" height="13" viewBox="0 0 20 20">
@@ -16,17 +16,20 @@ export const image: ICommand = {
       />
     </svg>
   ),
-  execute: (state: TextState, api: TextAreaTextApi) => {
+  execute: (state: ExecuteState, api: TextAreaTextApi) => {
     // Select everything
     const newSelectionRange = selectWord({ text: state.text, selection: state.selection });
     const state1 = api.setSelectionRange(newSelectionRange);
     // Replaces the current selection with the image
     const imageTemplate = state1.selectedText || 'https://example.com/your-image.png';
-    api.replaceSelection(`![](${imageTemplate})`);
-    // Adjust the selection to not contain the **
-    api.setSelectionRange({
-      start: 4 + state1.selection.start,
-      end: 4 + state1.selection.start + imageTemplate.length,
-    });
+    const val = state.command.value || '';
+    api.replaceSelection(val.replace(/({{text}})/gi, imageTemplate));
+
+    const start = state1.selection.start + val.indexOf('{{text}}');
+    let end = state1.selection.start + val.indexOf('{{text}}') + (state1.selection.end - state1.selection.start);
+    if (!state1.selectedText) {
+      end = end + imageTemplate.length;
+    }
+    api.setSelectionRange({ start, end });
   },
 };

package/src/commands/index.ts

@@ -58,7 +58,7 @@ export interface ICommandBase<T> {
     index: number,
   ) => void | undefined | null | React.ReactElement;
   execute?: (
-    state: TextState,
+    state: ExecuteState,
     api: TextAreaTextApi,
     dispatch?: React.Dispatch<ContextStore>,
     executeCommandState?: ExecuteCommandState,
@@ -66,6 +66,8 @@ export interface ICommandBase<T> {
   ) => void;
 }
 
+export type ExecuteState = TextState & { command: ICommand };
+
 export type ICommand<T = string> = ICommandChildCommands<T> | ICommandChildHandle<T>;
 
 export interface TextRange {
@@ -164,7 +166,8 @@ class TextAreaCommandOrchestrator implements CommandOrchestrator {
     state?: ExecuteCommandState,
     shortcuts?: string[],
   ): void {
-    command.execute && command.execute(getStateFromTextArea(this.textArea), this.textApi, dispatch, state, shortcuts);
+    command.execute &&
+      command.execute({ command, ...getStateFromTextArea(this.textArea) }, this.textApi, dispatch, state, shortcuts);
   }
 }
 

package/src/commands/italic.tsx

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import { ICommand, TextState, TextAreaTextApi } from './';
+import React from 'react';
+import { ICommand, ExecuteState, TextAreaTextApi } from './';
 import { selectWord } from '../utils/markdownUtils';
 
 export const italic: ICommand = {
   name: 'italic',
   keyCommand: 'italic',
   shortcuts: 'ctrlcmd+i',
-  value: '* *',
+  value: '*{{text}}*',
   buttonProps: { 'aria-label': 'Add italic text (ctrl + i)', title: 'Add italic text (ctrl + i)' },
   icon: (
     <svg data-name="italic" width="12" height="12" role="img" viewBox="0 0 320 512">
@@ -16,16 +16,17 @@ export const italic: ICommand = {
       />
     </svg>
   ),
-  execute: (state: TextState, api: TextAreaTextApi) => {
+  execute: (state: ExecuteState, api: TextAreaTextApi) => {
     // Adjust the selection to encompass the whole word if the caret is inside one
     const newSelectionRange = selectWord({ text: state.text, selection: state.selection });
     const state1 = api.setSelectionRange(newSelectionRange);
-    // Replaces the current selection with the italic mark up
-    const state2 = api.replaceSelection(`*${state1.selectedText}*`);
-    // Adjust the selection to not contain the *
-    api.setSelectionRange({
-      start: state2.selection.end - 1 - state1.selectedText.length,
-      end: state2.selection.end - 1,
-    });
+    // Replaces the current selection with the bold mark up
+    const val = state.command.value || '';
+    api.replaceSelection(val.replace(/({{text}})/gi, state1.selectedText));
+
+    const start = state1.selection.start + val.indexOf('{{text}}');
+    const end = state1.selection.start + val.indexOf('{{text}}') + (state1.selection.end - state1.selection.start);
+    // Adjust the selection to not contain the **
+    api.setSelectionRange({ start, end });
   },
 };

package/src/commands/link.tsx

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import { ICommand, TextState, TextAreaTextApi } from './';
+import React from 'react';
+import { ICommand, ExecuteState, TextAreaTextApi } from './';
 import { selectWord } from '../utils/markdownUtils';
 
 export const link: ICommand = {
   name: 'link',
   keyCommand: 'link',
   shortcuts: 'ctrlcmd+l',
-  value: '[](url)',
+  value: '[{{text}}](URL Here)',
   buttonProps: { 'aria-label': 'Add a link (ctrl + l)', title: 'Add a link (ctrl + l)' },
   icon: (
     <svg data-name="italic" width="12" height="12" role="img" viewBox="0 0 520 520">
@@ -16,16 +16,16 @@ export const link: ICommand = {
       />
     </svg>
   ),
-  execute: (state: TextState, api: TextAreaTextApi) => {
+  execute: (state: ExecuteState, api: TextAreaTextApi) => {
     // Adjust the selection to encompass the whole word if the caret is inside one
     const newSelectionRange = selectWord({ text: state.text, selection: state.selection });
     const state1 = api.setSelectionRange(newSelectionRange);
+    const val = state.command.value || '';
     // Replaces the current selection with the bold mark up
-    const state2 = api.replaceSelection(`[${state1.selectedText}](url)`);
+    api.replaceSelection(val.replace(/({{text}})/gi, state1.selectedText));
+    const start = state1.selection.start + val.indexOf('{{text}}');
+    const end = state1.selection.start + val.indexOf('{{text}}') + (state1.selection.end - state1.selection.start);
     // Adjust the selection to not contain the **
-    api.setSelectionRange({
-      start: state2.selection.end - 6 - state1.selectedText.length,
-      end: state2.selection.end - 6,
-    });
+    api.setSelectionRange({ start, end });
   },
 };

package/src/commands/list.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { ICommand, TextState, TextAreaTextApi } from './';
 import {
   selectWord,

package/src/commands/preview.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { ICommand, TextState, TextAreaTextApi } from './';
 import { ContextStore, ExecuteCommandState } from '../Context';
 

package/src/commands/quote.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { ICommand, TextState, TextAreaTextApi } from './';
 import {
   getBreaksNeededForEmptyLineBefore,

package/src/commands/strikeThrough.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { ICommand, TextState, TextAreaTextApi } from './';
+import React from 'react';
+import { ICommand, ExecuteState, TextAreaTextApi } from './';
 import { selectWord } from '../utils/markdownUtils';
 
 export const strikethrough: ICommand = {
@@ -10,7 +10,7 @@ export const strikethrough: ICommand = {
     'aria-label': 'Add strikethrough text (ctrl + shift + x)',
     title: 'Add strikethrough text (ctrl + shift + x)',
   },
-  value: '~~',
+  value: '~~{{text}}~~',
   icon: (
     <svg data-name="strikethrough" width="12" height="12" role="img" viewBox="0 0 512 512">
       <path
@@ -19,16 +19,17 @@ export const strikethrough: ICommand = {
       />
     </svg>
   ),
-  execute: (state: TextState, api: TextAreaTextApi) => {
+  execute: (state: ExecuteState, api: TextAreaTextApi) => {
     // Adjust the selection to encompass the whole word if the caret is inside one
     const newSelectionRange = selectWord({ text: state.text, selection: state.selection });
     const state1 = api.setSelectionRange(newSelectionRange);
-    // Replaces the current selection with the strikethrough mark up
-    const state2 = api.replaceSelection(`~~${state1.selectedText}~~`);
-    // Adjust the selection to not contain the ~~
-    api.setSelectionRange({
-      start: state2.selection.end - 2 - state1.selectedText.length,
-      end: state2.selection.end - 2,
-    });
+    // Replaces the current selection with the bold mark up
+    const val = state.command.value || '';
+    api.replaceSelection(val.replace(/({{text}})/gi, state1.selectedText));
+
+    const start = state1.selection.start + val.indexOf('{{text}}');
+    const end = state1.selection.start + val.indexOf('{{text}}') + (state1.selection.end - state1.selection.start);
+    // Adjust the selection to not contain the **
+    api.setSelectionRange({ start, end });
   },
 };

package/src/commands/title2.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { insertAtLineStart } from '../utils/InsertTextAtPosition';
 import { ICommand, TextState, TextAreaTextApi } from './';
 

package/src/commands/title3.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { insertAtLineStart } from '../utils/InsertTextAtPosition';
 import { ICommand, TextState, TextAreaTextApi } from './';
 

package/src/commands/title4.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { insertAtLineStart } from '../utils/InsertTextAtPosition';
 import { ICommand, TextState, TextAreaTextApi } from './';
 

package/src/commands/title5.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { insertAtLineStart } from '../utils/InsertTextAtPosition';
 import { ICommand, TextState, TextAreaTextApi } from './';
 

package/src/commands/title6.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { insertAtLineStart } from '../utils/InsertTextAtPosition';
 import { ICommand, TextState, TextAreaTextApi } from './';
 

package/esm/Context.js.map

@@ -1,19 +0,0 @@
-{
-  "version": 3,
-  "names": [
-    "React",
-    "reducer",
-    "state",
-    "action",
-    "EditorContext",
-    "createContext",
-    "markdown"
-  ],
-  "sources": [
-    "../src/Context.tsx"
-  ],
-  "sourcesContent": [
-    "import React from 'react';\nimport { ICommand, TextAreaCommandOrchestrator } from './commands';\nimport { MDEditorProps } from './Editor';\n\nexport type PreviewType = 'live' | 'edit' | 'preview';\n\nexport interface ContextStore {\n  components?: MDEditorProps['components'];\n  commands?: ICommand<string>[];\n  extraCommands?: ICommand<string>[];\n  markdown?: string;\n  preview?: PreviewType;\n  height?: React.CSSProperties['height'];\n  fullscreen?: boolean;\n  highlightEnable?: boolean;\n  autoFocus?: boolean;\n  textarea?: HTMLTextAreaElement;\n  commandOrchestrator?: TextAreaCommandOrchestrator;\n  textareaWarp?: HTMLDivElement;\n  textareaPre?: HTMLPreElement;\n  container?: HTMLDivElement | null;\n  dispatch?: React.Dispatch<ContextStore>;\n  barPopup?: Record<string, boolean>;\n  scrollTop?: number;\n  scrollTopPreview?: number;\n  tabSize?: number;\n  defaultTabEnable?: boolean;\n}\n\nexport type ExecuteCommandState = Pick<ContextStore, 'fullscreen' | 'preview' | 'highlightEnable'>;\n\nexport function reducer(state: ContextStore, action: ContextStore) {\n  return { ...state, ...action };\n}\n\nexport const EditorContext = React.createContext<ContextStore>({ markdown: '' });\n"
-  ],
-  "mappings": ";AAAA,OAAOA,KAAK,MAAM,OAAO;AA+BzB,OAAO,SAASC,OAAO,CAACC,KAAmB,EAAEC,MAAoB,EAAE;EACjE,oBAAYD,KAAK,EAAKC,MAAM;AAC9B;AAEA,OAAO,IAAMC,aAAa,gBAAGJ,KAAK,CAACK,aAAa,CAAe;EAAEC,QAAQ,EAAE;AAAG,CAAC,CAAC"
-}