fix: contenteditable

cam-inc · Aug 29, 2022 · fc87c17 · fc87c17
1 parent b761269
commit fc87c17
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 22 deletions.
diff --git a/packages/core/__tests__/smoke/dev-server/index.html b/packages/core/__tests__/smoke/dev-server/index.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
+    <title>Smoketest</title>
     <style>
       * {
         box-sizing: border-box;

diff --git a/packages/core/__tests__/smoke/dev-server/src/plugins.tsx b/packages/core/__tests__/smoke/dev-server/src/plugins.tsx
@@ -91,7 +91,7 @@ const SampleWithHooks = () => {
           >
             <input
               style={{ width: '100%' }}
-              onChangeCapture={handleChange}
+              onInput={handleChange}
               value={value}
             />
             <input type="submit" value="Submit" />
@@ -103,6 +103,17 @@ const SampleWithHooks = () => {
   );
 };
 
+const SampleWithContentEdiable = () => {
+  return (
+    <tool
+      static_get_toolbox={{ title: 'SampleWithContentEdiable', icon: '✍️' }}
+      save={() => {}}
+    >
+      <div contentEditable={true}></div>
+    </tool>
+  );
+};
+
 const CustomTool = () => {
   const handleClick = () => {
     console.log('clicked');
@@ -177,6 +188,12 @@ if (!outputElm) {
 const editor = new EditorJS({
   holder: containerElm,
   tools: {
+    sampleWithHooks: {
+      class: createPlugin(<SampleWithHooks />),
+    },
+    sampleWithContentEditable: {
+      class: createPlugin(<SampleWithContentEdiable />),
+    },
     customTool: {
       class: createPlugin(<CustomTool />),
     },
@@ -187,9 +204,6 @@ const editor = new EditorJS({
     customBlockTune: {
       class: createPlugin(<CustomBlockTune />),
     },
-    sampleWithHooks: {
-      class: createPlugin(<SampleWithHooks />),
-    },
   },
   data: {
     blocks: [],

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -20,7 +20,7 @@
     "dev:type": "npm run tsc -- --watch",
     "build": "run-s build:lib tsc",
     "build:lib": "vite build",
-    "tsc": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "tsc": "tsc --project tsconfig.build.json --emitDeclarationOnly --declaration --declarationDir dist/types",
     "clear": "rimraf ./dist",
     "test": "run-p test:unit test:integration",
     "test:unit": "jest --testMatch \"<rootDir>/__tests__/unit/*.spec.{ts,tsx}\"",

diff --git a/packages/core/src/hooks.ts b/packages/core/src/hooks.ts
@@ -296,10 +296,7 @@ export const useReducer = <S>(
 
 export const useState = <S = undefined>(initialState: S) => {
   currentHook = 1;
-  return useReducer<S>(invokeOrReturn, initialState) as [
-    S | undefined,
-    StateUpdater<S | undefined>
-  ];
+  return useReducer<S>(invokeOrReturn, initialState) as [S, StateUpdater<S>];
 };
 
 export const useEffect = (callback: Effect, args: any[]) => {

diff --git a/packages/core/src/reconciler/props.ts b/packages/core/src/reconciler/props.ts
@@ -104,6 +104,8 @@ export const setProps = ({ dom, key, newValue, oldValue }: SetPropsParams) => {
     key !== 'dangerouslySetInnerHTML'
   ) {
     dom.setAttribute(key, newValue);
+  } else if (key === 'contentEditable') {
+    dom.setAttribute('contentediable', newValue as unknown as string);
   } else {
     // @ts-expect-error
     dom._pluginProps[key] = newValue;

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -6,6 +6,7 @@ import {
   ToolConfig,
   BlockAPI,
   EditorConfig,
+  BlockToolData,
 } from '@editorjs/editorjs';
 import { BlockTuneData } from '@editorjs/editorjs/types/block-tunes/block-tune-data';
 
@@ -158,7 +159,7 @@ export namespace PDJSX {
     children: ComponentChild | ComponentChild[];
     save: (blockContent: C) => void;
     initializer?: PluginInitializer<BlockToolConstructorOptions>;
-    validate?: boolean;
+    validate?: (savedData: BlockToolData) => boolean;
     // TODO: JSX as props
     renderSettings?: { name: string; icon: string }[];
     // renderSettings?: { name: string; icon: JSX.IntrinsicElements }[];

diff --git a/packages/core/tsconfig.build.json b/packages/core/tsconfig.build.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["dist", "*.config.ts", "__tests__"]
+}
diff --git a/packages/tool-block-paragraph/package.json b/packages/tool-block-paragraph/package.json
@@ -45,8 +45,7 @@
     "url": "https://github.com/cam-inc/pde.js/issues"
   },
   "homepage": "https://github.com/cam-inc/pde.js#readme",
-  "devDependencies": {},
-  "peerDependencies": {
+  "devDependencies": {
     "@pdejs/core": "*"
   }
 }
diff --git a/packages/tool-block-paragraph/src/index.tsx b/packages/tool-block-paragraph/src/index.tsx
@@ -1,5 +1,5 @@
 /* @jsx h */
-import { createPlugin, h, useState } from '@pdejs/core';
+import { createPlugin, h, useEffect, useState } from '@pdejs/core';
 
 import type {
   API,
@@ -24,6 +24,18 @@ type SettingsContainer = HTMLDivElement;
 
 const Paragraph = () => {
   const [value, setValue] = useState('');
+  const [api, setApi] = useState<API | null>(null);
+  const [data, setData] = useState<BlockToolData<Data> | null>(null);
+  const [config, setConfig] = useState<ToolConfig<Config> | null>(null);
+  const [blockApi, setBlockApi] = useState<BlockAPI | null>(null);
+  const [readOnly, setReadOnly] = useState(false);
+
+  useEffect(() => {
+    console.log('[useEffect] data ', data);
+    if (data != null) {
+      setValue(data.value);
+    }
+  }, [data]);
 
   const toolbox = {
     // TODO: Editor.jsのi18n機能では不十分なので対応必要。
@@ -32,17 +44,45 @@ const Paragraph = () => {
     icon: '<svg width="17" height="15" viewBox="0 0 336 276" xmlns="http://www.w3.org/2000/svg"><path d="M291 150V79c0-19-15-34-34-34H79c-19 0-34 15-34 34v42l67-44 81 72 56-29 42 30zm0 52l-43-30-56 30-81-67-66 39v23c0 19 15 34 34 34h178c17 0 31-13 34-29zM79 0h178c44 0 79 35 79 79v118c0 44-35 79-79 79H79c-44 0-79-35-79-79V79C0 35 35 0 79 0z"/></svg>',
   };
 
-  const save = () => {};
+  const initializer = ({
+    api,
+    data,
+    config,
+    block,
+    readOnly,
+  }: BlockToolConstructorOptions) => {
+    setApi(api);
+    setData(data);
+    setConfig(config);
+    setBlockApi(block ?? null);
+    setReadOnly(!!readOnly);
+  };
+
+  const save = (container: HTMLElement) => {
+    return {
+      ...data,
+      ...{
+        value: container.innerHTML,
+      },
+    };
+  };
+
+  const validate = (data: BlockToolData<Data>) => {
+    return !!data.value;
+  };
 
   return (
-    <tool static_get_toolbox={toolbox} save={save}>
-      <div>{value}</div>
+    <tool
+      initializer={initializer}
+      static_get_toolbox={toolbox}
+      save={save}
+      validate={validate}
+    >
+      <div contentEditable={readOnly}>{value}</div>
     </tool>
   );
 };
 
-export default createPlugin(<Paragraph />);
-
 class _Paragraph implements BlockTool {
   static get toolbox(): ToolboxConfig {
     return {
@@ -121,3 +161,6 @@ class _Paragraph implements BlockTool {
     return this.settingsContainer;
   }
 }
+
+export default createPlugin(<Paragraph />);
+// export default _Paragraph;
diff --git a/packages/tool-inline-marker/package.json b/packages/tool-inline-marker/package.json
@@ -45,8 +45,7 @@
     "url": "https://github.com/cam-inc/pde.js/issues"
   },
   "homepage": "https://github.com/cam-inc/pde.js#readme",
-  "devDependencies": {},
-  "peerDependencies": {
+  "devDependencies": {
     "@pdejs/core": "*"
   }
 }
diff --git a/packages/tool-inline-marker/src/index.tsx b/packages/tool-inline-marker/src/index.tsx
@@ -38,11 +38,11 @@ const Marker = () => {
       surround={surround}
       checkState={checkState}
     >
-      <div class={api?.styles.inlineToolButton}>
+      <button className={api?.styles.inlineToolButton ?? 'ce-inline-tool'}>
         <svg width="20" height="18">
           <path d="M10.458 12.04l2.919 1.686-.781 1.417-.984-.03-.974 1.687H8.674l1.49-2.583-.508-.775.802-1.401zm.546-.952l3.624-6.327a1.597 1.597 0 0 1 2.182-.59 1.632 1.632 0 0 1 .615 2.201l-3.519 6.391-2.902-1.675zm-7.73 3.467h3.465a1.123 1.123 0 1 1 0 2.247H3.273a1.123 1.123 0 1 1 0-2.247z" />
         </svg>
-      </div>
+      </button>
     </inlineTool>
   );
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,7 @@ @@
     <html>
       <head>
         <meta charset="utf-8" />
+        <title>Smoketest</title>
         <style>
           * {
             box-sizing: border-box;
@@ Expand Down @@