feat: move config out

README.md

@@ -8,29 +8,29 @@ npm install @hexx/editor
 yarn add @hexx/editor
 ```
 
-## Example
+### Example
 
 ```jsx
 import { Editor } from '@hexx/editor';
 import {
-  BlockMap, // default block mapping
+  PresetEditableScope, // default block mapping
   // preset
   PlusButton,
   TuneButton,
   InlineTool,
   // additional inline tool
   InlineCode,
   InlineMarker,
-  InlineLink
+  InlineLink,
 } from '@hexx/editor/components';
 
-<Editor blockMap={BlockMap}>
+<Editor scope={PresetEditableScope}>
   <PlusButton />
   <TuneButton />
   <InlineTool>
     <InlineMarker />
     <InlineCode />
     <InlineLink />
   </InlineTool>
-</Editor>
+</Editor>;
 ```

example/components/editor-example.tsx

@@ -17,10 +17,11 @@ import {
   SelectionPlugin,
   Unstable_FileDropPlugin,
   Unstable_MarkdownShortcutPlugin,
+  PastHtmlPlugin,
 } from '@hexx/editor/plugins';
 import { BasicImageBlock } from '@hexx/block-basic-image';
 import { css } from '@hexx/theme';
-import { blockMap } from 'lib/block-map';
+import { mdastConfigs, scope } from 'lib/edit-scope';
 import Linkify from 'linkify-it';
 import { ElementRef, useCallback, useRef, useState } from 'react';
 import tlds from 'tlds';
@@ -31,7 +32,7 @@ const linkify = Linkify();
 
 linkify.tlds(tlds);
 
-const EditorExample = (props: Omit<EditorProps, 'blockMap'>) => {
+const EditorExample = (props: Omit<EditorProps, 'scope'>) => {
   const [showDataViewer, setShowDataViewer] = useState(false);
   const editorRef = useRef<ElementRef<typeof Editor>>();
   const localSaverRef =
@@ -71,21 +72,25 @@ const EditorExample = (props: Omit<EditorProps, 'blockMap'>) => {
         onLoad={onLoadLocalStorage}
         {...editorStyles}
         {...props}
-        blockMap={blockMap}
+        scope={scope}
       >
         <PlusButton />
         <TuneButton />
-        <EditorWidthPlugin />
-        <HistoryPlugin />
-        <SelectionPlugin />
         <HexxDevTool />
-        <LinkifyItPlugin linkifyIt={linkify} />
         <InlineTool>
           <InlineMarker />
           <InlineCode />
           <InlineLink />
         </InlineTool>
-        <Unstable_MarkdownShortcutPlugin />
+        <LinkifyItPlugin linkifyIt={linkify} />
+        {/* plugin */}
+        <EditorWidthPlugin />
+        <HistoryPlugin />
+        <SelectionPlugin />
+        <PastHtmlPlugin mdastConfigs={mdastConfigs} />
+        <Unstable_MarkdownShortcutPlugin
+          mdastConfigs={mdastConfigs}
+        />
         <Unstable_FileDropPlugin
           resolve={async (files) => {
             if (files[0] && files[0].type.includes('image')) {

example/lib/edit-scope.ts

@@ -0,0 +1,20 @@
+import {
+  BasicImageBlock,
+  basicImageMdast,
+} from '@hexx/block-basic-image';
+import { CodeBlock, codeMdast } from '@hexx/block-code';
+import { presetEditableScope } from '@hexx/editor/components';
+import { presetMDASTConfig } from '@hexx/editor';
+import { MdastConfigs } from '../../packages/editor/src/parser/types';
+
+export const scope = {
+  ...presetEditableScope,
+  code: CodeBlock,
+  'basic-image': BasicImageBlock,
+};
+
+export const mdastConfigs: MdastConfigs = {
+  ...presetMDASTConfig,
+  image: basicImageMdast,
+  code: codeMdast,
+};

example/pages/index.tsx

@@ -1,13 +1,13 @@
+import { BlockType, createHexxMarkdownParser } from '@hexx/editor';
+import { styled } from '@hexx/theme';
 import fs from 'fs';
-import path from 'path';
+import { JSDOM } from 'jsdom';
+import { mdastConfigs } from 'lib/edit-scope';
+import { GetStaticProps } from 'next';
+import dynamic from 'next/dynamic';
 import Head from 'next/head';
+import path from 'path';
 import styles from '../styles/Home.module.css';
-import dynamic from 'next/dynamic';
-import { styled } from '@hexx/theme';
-import { GetStaticProps } from 'next';
-import { BlockType, createHexxMarkdownParser } from '@hexx/editor';
-import { blockMap } from 'lib/block-map';
-import { JSDOM } from 'jsdom';
 
 const EditorExample = dynamic(
   () => import('../components/editor-example'),
@@ -61,7 +61,7 @@ export default function Home(props: { json?: BlockType<any>[] }) {
 }
 
 export const getStaticProps: GetStaticProps = async () => {
-  const markdownParser = createHexxMarkdownParser(blockMap, {
+  const markdownParser = createHexxMarkdownParser(mdastConfigs, {
     // to support ssr or ssg you have to use jsdom in markdown parser
     document: new JSDOM().window.document,
     autoGenerateId: true,

example/pages/render.tsx

@@ -1,20 +1,18 @@
-import fs from 'fs';
-import path from 'path';
-import Head from 'next/head';
-import styles from '../styles/Home.module.css';
-import dynamic from 'next/dynamic';
-import { styled } from '@hexx/theme';
-import { GetStaticProps } from 'next';
+import { CodeBlockRenderer } from '@hexx/block-code';
 import { BlockType, createHexxMarkdownParser } from '@hexx/editor';
+import { EditorRenderer, PresetScope } from '@hexx/renderer';
+import { styled } from '@hexx/theme';
+import fs from 'fs';
 import { JSDOM } from 'jsdom';
-
-import { EditorRenderer, BlockMap } from '@hexx/renderer';
-import { blockMap } from 'lib/block-map';
-import { CodeBlockRenderer } from '@hexx/block-code';
 import { editorStyles } from 'lib/common-style';
+import { mdastConfigs } from 'lib/edit-scope';
+import { GetStaticProps } from 'next';
+import Head from 'next/head';
+import path from 'path';
+import styles from '../styles/Home.module.css';
 
-const renderBlockMap = {
-  ...BlockMap,
+const renderScope = {
+  ...PresetScope,
   code: CodeBlockRenderer,
 };
 
@@ -64,15 +62,15 @@ export default function Home(props: { json?: BlockType<any>[] }) {
             css: editorStyles.blockCss,
           }}
           blocks={props.json}
-          blockMap={renderBlockMap}
+          scope={renderScope}
         />
       </main>
     </div>
   );
 }
 
 export const getStaticProps: GetStaticProps = async () => {
-  const markdownParser = createHexxMarkdownParser(blockMap, {
+  const markdownParser = createHexxMarkdownParser(mdastConfigs, {
     // to support ssr or ssg you have to use jsdom in markdown parser
     document: new JSDOM().window.document,
     autoGenerateId: true,

package.json

@@ -19,7 +19,7 @@
   "devDependencies": {
     "@preconstruct/cli": "^2.1.0",
     "@svgr/cli": "^5.5.0",
-    "@types/node": "^15.12.4",
+    "@types/node": "^15.12.5",
     "@types/react": "^17.0.11",
     "@types/react-dom": "^17.0.8",
     "@types/uuid": "^8.3.0",
@@ -32,6 +32,6 @@
   },
   "dependencies": {
     "@changesets/cli": "^2.16.0",
-    "prettier": "^2.3.1"
+    "prettier": "^2.3.2"
   }
 }

packages/block-basic-image/src/basic-image.tsx

@@ -11,11 +11,10 @@ interface Config {
 
 const _BasicImageBlock = ({
   id,
-  index,
   config,
   blockAtom,
 }: BlockProps<Config>) => {
-  const { update, block } = useBlock(blockAtom, index);
+  const { update, block } = useBlock(blockAtom);
   const handleImageUpdate = (url: string) => {
     update({
       ...block,
@@ -68,10 +67,6 @@ export const BasicImageBlock = applyBlock<any, Config>(
   _BasicImageBlock,
   {
     type: 'basic-image',
-    icon: {
-      svg: SvgImage,
-      text: 'Image',
-    },
     config: {
       onInput: (files: File[] | FileList) => {
         return new Promise<string>((res, rej) => {
@@ -84,14 +79,21 @@ export const BasicImageBlock = applyBlock<any, Config>(
       },
     },
     isEmpty: (d) => !d.file?.url,
-    mdast: {
-      type: 'html.image',
-      in: (content: Image) => ({
-        url: content.url,
-      }),
-    },
     defaultValue: {
       url: '',
     },
   },
 );
+
+export const ImageIcon = {
+  svg: SvgImage,
+  text: 'Image',
+};
+
+export const basicImageMdast = {
+  type: 'html.image',
+  blockType: 'basic-image',
+  in: (content: Image) => ({
+    url: content.url,
+  }),
+};

packages/block-code/src/code-block.tsx

@@ -17,13 +17,8 @@ type Config = {
   theme?: PrismTheme;
 };
 
-function _CodeBlock({
-  id,
-  index,
-  config,
-  blockAtom,
-}: BlockProps<Config>) {
-  const { update, block } = useBlock(blockAtom, index);
+function _CodeBlock({ config, blockAtom }: BlockProps<Config>) {
+  const { update, block } = useBlock(blockAtom);
 
   const { padding, ...restCodeBlockStyle } = codeBlockStyle;
 
@@ -73,8 +68,8 @@ function _CodeBlock({
       value={block.data.value}
       onValueChange={onChange}
       highlight={highlightCode}
-      padding={padding}
-      style={restCodeBlockStyle}
+      padding={padding as string}
+      style={restCodeBlockStyle as any}
       onKeyDown={(e) => {
         if (e.key === 'Enter' && !e.shiftKey) {
           e.stopPropagation();
@@ -96,10 +91,6 @@ export const CodeBlock = applyBlock<TCodeBlock['data'], Config>(
       text: 'Code Block',
       svg: SvgCode,
     },
-    mdast: {
-      type: 'code',
-      in: ({ lang, value }) => ({ value, lang }),
-    },
     config: {
       placeholder: 'Code...',
     },
@@ -108,3 +99,9 @@ export const CodeBlock = applyBlock<TCodeBlock['data'], Config>(
     },
   },
 );
+
+export const codeMdast = {
+  type: 'code',
+  blockType: 'code',
+  in: ({ lang, value }) => ({ value, lang }),
+};

packages/block-code/src/renderer.tsx

@@ -1,4 +1,4 @@
-import { StitchesCssProp, StitchesProps, styled } from '@hexx/theme';
+import { styled, CSS } from '@hexx/theme';
 import Highlight, {
   Language,
   Prism,
@@ -13,7 +13,7 @@ export type TCodeBlock = {
   };
 };
 
-export const codeBlockStyle: StitchesCssProp = {
+export const codeBlockStyle: CSS = {
   fontFamily: 'monospace',
   padding: '24px',
   borderRadius: '4px',

packages/editor/package.json

@@ -26,11 +26,11 @@
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.14.5",
-    "@size-limit/preset-big-lib": "^5.0.0",
+    "@size-limit/preset-big-lib": "^5.0.1",
     "@types/linkify-it": "^3.0.1",
     "@types/markdown-it": "^12.0.2",
     "@types/mdast": "^3.0.3",
-    "size-limit": "^5.0.0"
+    "size-limit": "^5.0.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.14.6",