From cb58be39552f37ffa79bd2539d7c4404dc2cc028 Mon Sep 17 00:00:00 2001 From: imdbsd Date: Fri, 4 Feb 2022 13:43:26 +0800 Subject: [PATCH 1/6] init code --- .../slate-editable-plugin-first/.prettierrc | 8 +++ .../slate-editable-plugin-first/package.json | 17 +++++ .../src/Editable.tsx | 63 ++++++++++++++++ .../src/commons.ts | 2 + .../src/useCreateEditor.ts | 13 ++++ .../slate-editable-plugin-first/tsconfig.json | 71 +++++++++++++++++++ yarn.lock | 33 +++++++++ 7 files changed, 207 insertions(+) create mode 100644 packages/slate-editable-plugin-first/.prettierrc create mode 100644 packages/slate-editable-plugin-first/package.json create mode 100644 packages/slate-editable-plugin-first/src/Editable.tsx create mode 100644 packages/slate-editable-plugin-first/src/commons.ts create mode 100644 packages/slate-editable-plugin-first/src/useCreateEditor.ts create mode 100644 packages/slate-editable-plugin-first/tsconfig.json diff --git a/packages/slate-editable-plugin-first/.prettierrc b/packages/slate-editable-plugin-first/.prettierrc new file mode 100644 index 0000000..e396c2c --- /dev/null +++ b/packages/slate-editable-plugin-first/.prettierrc @@ -0,0 +1,8 @@ +{ + "endOfLine": "lf", + "semi": false, + "singleQuote": true, + "tabWidth": 2, + "trailingComma": "es5", + "bracketSpacing": false +} diff --git a/packages/slate-editable-plugin-first/package.json b/packages/slate-editable-plugin-first/package.json new file mode 100644 index 0000000..5884835 --- /dev/null +++ b/packages/slate-editable-plugin-first/package.json @@ -0,0 +1,17 @@ +{ + "name": "@imdbsd/slate-editable-plugin-first", + "version": "0.0.1", + "description": "Slate JS Editable and Slate Provider wrapper for pluggin first concept", + "main": "dist/index.js", + "types": "dist/index.d.ts", + "author": "imdbsd", + "license": "MIT", + "private": false, + "scripts": { + "build": "tsc -p ." + }, + "peerDependencies": { + "slate": "^0.72.8", + "slate-react": "^0.72.8" + } +} diff --git a/packages/slate-editable-plugin-first/src/Editable.tsx b/packages/slate-editable-plugin-first/src/Editable.tsx new file mode 100644 index 0000000..101c639 --- /dev/null +++ b/packages/slate-editable-plugin-first/src/Editable.tsx @@ -0,0 +1,63 @@ +import * as React from 'react' +import {createEditor, Descendant, NodeEntry, Editor} from 'slate' +import { + Editable as SlateEditable, + RenderElementProps, + RenderLeafProps, + RenderPlaceholderProps, + ReactEditor, + Slate, + withReact, +} from 'slate-react' +import {DOMRange} from 'slate-react/dist/utils/dom' +import useCreateEditor from 'useCreateEditor' + +type Plugin = { + withPlugin?: (editor: T) => T + renderElement?: (props: RenderElementProps) => JSX.Element + renderLeaf?: (props: RenderLeafProps) => JSX.Element + renderPlaceholder?: (props: RenderPlaceholderProps) => JSX.Element + decorate?: (entry: NodeEntry) => Range[] + onDOMBeforeInput?: (event: InputEvent) => void + onKeyDown?: (event: React.KeyboardEvent) => void + onCopy?: (event: React.ClipboardEvent) => void + onCut?: (event: React.ClipboardEvent) => void + onPaste?: (event: React.ClipboardEvent) => void + onFocus?: (event: React.FocusEvent) => void + onDragStart?: (event: React.DragEvent) => void + onDragEnd?: (event: React.DragEvent) => void + onDrop?: (event: React.DragEvent) => void + onCompositionStart?: (event: React.CompositionEvent) => void + onCompositionUpdate?: (event: React.CompositionEvent) => void + onCompositionEnd?: (event: React.CompositionEvent) => void + onClick?: (event: React.MouseEvent) => void + onBlur?: (event: React.FocusEvent) => void + onBeforeInput?: (event: React.FormEvent) => void +} + +type Props = { + editorRef?: any + value: Descendant[] + onChange: (value: Descendant[]) => void + plugins?: Plugin[] + + // Editable vanila props + placeholder?: string + readOnly?: boolean + style?: React.CSSProperties + scrollSelectionIntoView?: (editor: ReactEditor, domRange: DOMRange) => void + as?: React.ElementType +} + +const Editable = (props: Props): React.ReactNode => { + const {value, onChange, plugins, editorRef, ...editableProps} = props + const editor = useCreateEditor() + + return ( + + + + ) +} + +export default Editable diff --git a/packages/slate-editable-plugin-first/src/commons.ts b/packages/slate-editable-plugin-first/src/commons.ts new file mode 100644 index 0000000..a381217 --- /dev/null +++ b/packages/slate-editable-plugin-first/src/commons.ts @@ -0,0 +1,2 @@ +export const compose = (fn1: (a: R) => R, ...fns: Array<(a: R) => R>) => + fns.reduceRight((prevFn, nextFn) => (value) => nextFn(prevFn(value)), fn1); diff --git a/packages/slate-editable-plugin-first/src/useCreateEditor.ts b/packages/slate-editable-plugin-first/src/useCreateEditor.ts new file mode 100644 index 0000000..060baa7 --- /dev/null +++ b/packages/slate-editable-plugin-first/src/useCreateEditor.ts @@ -0,0 +1,13 @@ +import * as React from 'react' +import {createEditor} from 'slate' +import {withReact} from 'slate-react' +import {compose} from 'commons' + +const useCreateEditor = () => { + // @ts-ignore + const [editor] = React.useState(() => compose(withReact)(createEditor())) + + return editor +} + +export default useCreateEditor \ No newline at end of file diff --git a/packages/slate-editable-plugin-first/tsconfig.json b/packages/slate-editable-plugin-first/tsconfig.json new file mode 100644 index 0000000..6819318 --- /dev/null +++ b/packages/slate-editable-plugin-first/tsconfig.json @@ -0,0 +1,71 @@ +{ + "compilerOptions": { + /* Visit https://aka.ms/tsconfig.json to read more about this file */ + + /* Basic Options */ + // "incremental": true, /* Enable incremental compilation */ + "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */, + "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */, + // "lib": [], /* Specify library files to be included in the compilation. */ + // "allowJs": true, /* Allow javascript files to be compiled. */ + // "checkJs": true, /* Report errors in .js files. */ + "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */, + "declaration": true /* Generates corresponding '.d.ts' file. */, + // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ + // "sourceMap": true, /* Generates corresponding '.map' file. */ + // "outFile": "./", /* Concatenate and emit output to single file. */ + "outDir": "./dist" /* Redirect output structure to the directory. */, + "rootDir": "./src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */, + // "composite": true, /* Enable project compilation */ + // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ + "removeComments": true /* Do not emit comments to output. */, + // "noEmit": true, /* Do not emit outputs. */ + // "importHelpers": true, /* Import emit helpers from 'tslib'. */ + // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ + // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ + + /* Strict Type-Checking Options */ + "strict": true /* Enable all strict type-checking options. */, + "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ + // "strictNullChecks": true, /* Enable strict null checks. */ + // "strictFunctionTypes": true, /* Enable strict checking of function types. */ + // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ + // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ + // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ + // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ + + /* Additional Checks */ + "noUnusedLocals": true /* Report errors on unused locals. */, + "noUnusedParameters": true /* Report errors on unused parameters. */, + // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ + // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ + // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ + + /* Module Resolution Options */ + // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ + "baseUrl": "./src", /* Base directory to resolve non-absolute module names. */ + // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ + // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ + // "typeRoots": [], /* List of folders to include type definitions from. */ + // "types": [], /* Type declaration files to be included in compilation. */ + // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ + "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */, + // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + + /* Source Map Options */ + // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ + // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ + + /* Experimental Options */ + // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ + // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ + + /* Advanced Options */ + "skipLibCheck": true /* Skip type checking of declaration files. */, + "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ + }, + "exclude": ["node_modules", "__tests__", "dist"] +} diff --git a/yarn.lock b/yarn.lock index 6489e91..534fdbd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7922,6 +7922,11 @@ immer@^8.0.1: resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.4.tgz#3a21605a4e2dded852fb2afd208ad50969737b7a" integrity sha512-jMfL18P+/6P6epANRvRk6q8t+3gGhqsJ9EuJ25AXE+9bNTYtssvzeYbEd0mXRYWCmmXSIbnlpz6vd6iJlmGGGQ== +immer@^9.0.6: + version "9.0.12" + resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.12.tgz#2d33ddf3ee1d247deab9d707ca472c8c942a0f20" + integrity sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA== + import-cwd@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9" @@ -8440,6 +8445,11 @@ is-plain-object@^2.0.3, is-plain-object@^2.0.4: dependencies: isobject "^3.0.1" +is-plain-object@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344" + integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q== + is-potential-custom-element-name@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.0.tgz#0c52e54bcca391bb2c494b21e8626d7336c6e397" @@ -12961,6 +12971,20 @@ slate-react@0.64.0: scroll-into-view-if-needed "^2.2.20" tiny-invariant "1.0.6" +slate-react@^0.72.8: + version "0.72.8" + resolved "https://registry.yarnpkg.com/slate-react/-/slate-react-0.72.8.tgz#b6b5d88ce8f89ba26965066b628757c60866cb23" + integrity sha512-asgRV/msGqfzm6cPxhrRo2Iuj5RhoDvicfkwpVD63b4K4yfPpL7a8sx0zO5WY7gqggBLjrYnNth6mAbdlHPzMg== + dependencies: + "@types/is-hotkey" "^0.1.1" + "@types/lodash" "^4.14.149" + direction "^1.0.3" + is-hotkey "^0.1.6" + is-plain-object "^5.0.0" + lodash "^4.17.4" + scroll-into-view-if-needed "^2.2.20" + tiny-invariant "1.0.6" + slate@0.63.0: version "0.63.0" resolved "https://registry.yarnpkg.com/slate/-/slate-0.63.0.tgz#63a50c45a8971d350a3ebeef25e10cd9fa5c7726" @@ -12973,6 +12997,15 @@ slate@0.63.0: is-plain-object "^3.0.0" tiny-warning "^1.0.3" +slate@^0.72.8: + version "0.72.8" + resolved "https://registry.yarnpkg.com/slate/-/slate-0.72.8.tgz#5a018edf24e45448655293a68bfbcf563aa5ba81" + integrity sha512-/nJwTswQgnRurpK+bGJFH1oM7naD5qDmHd89JyiKNT2oOKD8marW0QSBtuFnwEbL5aGCS8AmrhXQgNOsn4osAw== + dependencies: + immer "^9.0.6" + is-plain-object "^5.0.0" + tiny-warning "^1.0.3" + slice-ansi@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b" From b40339a1f24445b62966310b78d845c5325ada55 Mon Sep 17 00:00:00 2001 From: imdbsd Date: Fri, 4 Feb 2022 14:19:36 +0800 Subject: [PATCH 2/6] compose for render elements --- .../src/Editable.tsx | 31 ++++++++++++++++--- .../src/commons.ts | 2 -- .../src/commons.tsx | 20 ++++++++++++ .../slate-editable-plugin-first/src/index.tsx | 1 + 4 files changed, 48 insertions(+), 6 deletions(-) delete mode 100644 packages/slate-editable-plugin-first/src/commons.ts create mode 100644 packages/slate-editable-plugin-first/src/commons.tsx create mode 100644 packages/slate-editable-plugin-first/src/index.tsx diff --git a/packages/slate-editable-plugin-first/src/Editable.tsx b/packages/slate-editable-plugin-first/src/Editable.tsx index 101c639..9503538 100644 --- a/packages/slate-editable-plugin-first/src/Editable.tsx +++ b/packages/slate-editable-plugin-first/src/Editable.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import {createEditor, Descendant, NodeEntry, Editor} from 'slate' +import {Descendant, NodeEntry, Editor} from 'slate' import { Editable as SlateEditable, RenderElementProps, @@ -7,14 +7,14 @@ import { RenderPlaceholderProps, ReactEditor, Slate, - withReact, } from 'slate-react' import {DOMRange} from 'slate-react/dist/utils/dom' +import {composeRenderElements, RenderElementFunc} from 'commons' import useCreateEditor from 'useCreateEditor' type Plugin = { withPlugin?: (editor: T) => T - renderElement?: (props: RenderElementProps) => JSX.Element + renderElement?: RenderElementFunc renderLeaf?: (props: RenderLeafProps) => JSX.Element renderPlaceholder?: (props: RenderPlaceholderProps) => JSX.Element decorate?: (entry: NodeEntry) => Range[] @@ -49,13 +49,36 @@ type Props = { as?: React.ElementType } +const useComposePlugin = < + P extends unknown = Function, + C extends unknown = Function +>( + pluginKey: string, + composer: (...func: C[]) => P, + plugins: Plugin[] +): P => { + const reducedPlugins = + plugins?.reduce( + (nextPlugin, plugin) => + // @ts-ignore @TODO better type checking + plugin[pluginKey] ? [...nextPlugin, plugin[pluginKey]] : nextPlugin, + [] as C[] + ) || ([] as C[]) + // @ts-ignore + return React.useCallback(composer(...reducedPlugins), []) +} + const Editable = (props: Props): React.ReactNode => { const {value, onChange, plugins, editorRef, ...editableProps} = props + const renderElement = useComposePlugin< + (props: RenderElementProps) => JSX.Element + >('renderElement', composeRenderElements, plugins) + const editor = useCreateEditor() return ( - + ) } diff --git a/packages/slate-editable-plugin-first/src/commons.ts b/packages/slate-editable-plugin-first/src/commons.ts deleted file mode 100644 index a381217..0000000 --- a/packages/slate-editable-plugin-first/src/commons.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const compose = (fn1: (a: R) => R, ...fns: Array<(a: R) => R>) => - fns.reduceRight((prevFn, nextFn) => (value) => nextFn(prevFn(value)), fn1); diff --git a/packages/slate-editable-plugin-first/src/commons.tsx b/packages/slate-editable-plugin-first/src/commons.tsx new file mode 100644 index 0000000..dd9614c --- /dev/null +++ b/packages/slate-editable-plugin-first/src/commons.tsx @@ -0,0 +1,20 @@ +import * as React from 'react' +import {RenderElementProps, DefaultElement} from 'slate-react' + +export const compose = (fn1: (a: R) => R, ...fns: Array<(a: R) => R>) => + fns.reduceRight((prevFn, nextFn) => (value) => nextFn(prevFn(value)), fn1) + +export type RenderElementFunc = ( + props: RenderElementProps, + next?: RenderElementFunc +) => JSX.Element + +export const composeRenderElements = ( + ...renderElements: RenderElementFunc[] +) => (props: RenderElementProps) => { + const render = renderElements.reduceRight( + (sum, renderElement) => (props, next) => + renderElement(props, (nextProps) => sum({...props, ...nextProps}, next)) + ) + return render(props, DefaultElement) +} diff --git a/packages/slate-editable-plugin-first/src/index.tsx b/packages/slate-editable-plugin-first/src/index.tsx new file mode 100644 index 0000000..a534b24 --- /dev/null +++ b/packages/slate-editable-plugin-first/src/index.tsx @@ -0,0 +1 @@ +export {default as Editable} from 'Editable' From 2f0d5654e0cbfd2d918dbe0800a0a022a5da9b37 Mon Sep 17 00:00:00 2001 From: imdbsd Date: Fri, 4 Feb 2022 14:20:39 +0800 Subject: [PATCH 3/6] . --- packages/slate-editable-plugin-first/src/Editable.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/slate-editable-plugin-first/src/Editable.tsx b/packages/slate-editable-plugin-first/src/Editable.tsx index 9503538..7c5d1fa 100644 --- a/packages/slate-editable-plugin-first/src/Editable.tsx +++ b/packages/slate-editable-plugin-first/src/Editable.tsx @@ -71,8 +71,9 @@ const useComposePlugin = < const Editable = (props: Props): React.ReactNode => { const {value, onChange, plugins, editorRef, ...editableProps} = props const renderElement = useComposePlugin< - (props: RenderElementProps) => JSX.Element - >('renderElement', composeRenderElements, plugins) + (props: RenderElementProps) => JSX.Element, + RenderElementFunc + >('renderElement', composeRenderElements, plugins || []) const editor = useCreateEditor() From 035fe96f0cf0ef95eaff6402c082a057434bfce3 Mon Sep 17 00:00:00 2001 From: imdbsd Date: Fri, 4 Feb 2022 14:21:47 +0800 Subject: [PATCH 4/6] update desc --- packages/slate-editable-plugin-first/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/slate-editable-plugin-first/package.json b/packages/slate-editable-plugin-first/package.json index 5884835..ef4b58f 100644 --- a/packages/slate-editable-plugin-first/package.json +++ b/packages/slate-editable-plugin-first/package.json @@ -1,7 +1,7 @@ { - "name": "@imdbsd/slate-editable-plugin-first", + "name": "@imdbsd/slate-plugin-composer", "version": "0.0.1", - "description": "Slate JS Editable and Slate Provider wrapper for pluggin first concept", + "description": "Slate JS composer plugins", "main": "dist/index.js", "types": "dist/index.d.ts", "author": "imdbsd", From 344274b1e69cb8e5ec96f396ce2fee3154c041e4 Mon Sep 17 00:00:00 2001 From: imdbsd Date: Fri, 4 Feb 2022 14:23:04 +0800 Subject: [PATCH 5/6] . --- .../.prettierrc | 0 .../package.json | 0 .../src/Editable.tsx | 0 .../src/commons.tsx | 1 - .../src/index.tsx | 0 .../src/useCreateEditor.ts | 0 .../tsconfig.json | 0 7 files changed, 1 deletion(-) rename packages/{slate-editable-plugin-first => slate-plugin-composer}/.prettierrc (100%) rename packages/{slate-editable-plugin-first => slate-plugin-composer}/package.json (100%) rename packages/{slate-editable-plugin-first => slate-plugin-composer}/src/Editable.tsx (100%) rename packages/{slate-editable-plugin-first => slate-plugin-composer}/src/commons.tsx (95%) rename packages/{slate-editable-plugin-first => slate-plugin-composer}/src/index.tsx (100%) rename packages/{slate-editable-plugin-first => slate-plugin-composer}/src/useCreateEditor.ts (100%) rename packages/{slate-editable-plugin-first => slate-plugin-composer}/tsconfig.json (100%) diff --git a/packages/slate-editable-plugin-first/.prettierrc b/packages/slate-plugin-composer/.prettierrc similarity index 100% rename from packages/slate-editable-plugin-first/.prettierrc rename to packages/slate-plugin-composer/.prettierrc diff --git a/packages/slate-editable-plugin-first/package.json b/packages/slate-plugin-composer/package.json similarity index 100% rename from packages/slate-editable-plugin-first/package.json rename to packages/slate-plugin-composer/package.json diff --git a/packages/slate-editable-plugin-first/src/Editable.tsx b/packages/slate-plugin-composer/src/Editable.tsx similarity index 100% rename from packages/slate-editable-plugin-first/src/Editable.tsx rename to packages/slate-plugin-composer/src/Editable.tsx diff --git a/packages/slate-editable-plugin-first/src/commons.tsx b/packages/slate-plugin-composer/src/commons.tsx similarity index 95% rename from packages/slate-editable-plugin-first/src/commons.tsx rename to packages/slate-plugin-composer/src/commons.tsx index dd9614c..151345a 100644 --- a/packages/slate-editable-plugin-first/src/commons.tsx +++ b/packages/slate-plugin-composer/src/commons.tsx @@ -1,4 +1,3 @@ -import * as React from 'react' import {RenderElementProps, DefaultElement} from 'slate-react' export const compose = (fn1: (a: R) => R, ...fns: Array<(a: R) => R>) => diff --git a/packages/slate-editable-plugin-first/src/index.tsx b/packages/slate-plugin-composer/src/index.tsx similarity index 100% rename from packages/slate-editable-plugin-first/src/index.tsx rename to packages/slate-plugin-composer/src/index.tsx diff --git a/packages/slate-editable-plugin-first/src/useCreateEditor.ts b/packages/slate-plugin-composer/src/useCreateEditor.ts similarity index 100% rename from packages/slate-editable-plugin-first/src/useCreateEditor.ts rename to packages/slate-plugin-composer/src/useCreateEditor.ts diff --git a/packages/slate-editable-plugin-first/tsconfig.json b/packages/slate-plugin-composer/tsconfig.json similarity index 100% rename from packages/slate-editable-plugin-first/tsconfig.json rename to packages/slate-plugin-composer/tsconfig.json From b917952c0b514892f8f0c60fb520f3b3bd8aff9e Mon Sep 17 00:00:00 2001 From: imdbsd Date: Fri, 4 Feb 2022 14:42:16 +0800 Subject: [PATCH 6/6] fix type --- .../slate-plugin-composer/src/Editable.tsx | 21 +++++++----- packages/slate-plugin-composer/src/index.tsx | 2 +- .../src/useCreateEditor.ts | 2 +- playground/src/SlateComposer.stories.tsx | 13 ++++++++ playground/src/SlateComposer.tsx | 22 +++++++++++++ yarn.lock | 33 ------------------- 6 files changed, 50 insertions(+), 43 deletions(-) create mode 100644 playground/src/SlateComposer.stories.tsx create mode 100644 playground/src/SlateComposer.tsx diff --git a/packages/slate-plugin-composer/src/Editable.tsx b/packages/slate-plugin-composer/src/Editable.tsx index 7c5d1fa..ff825a5 100644 --- a/packages/slate-plugin-composer/src/Editable.tsx +++ b/packages/slate-plugin-composer/src/Editable.tsx @@ -9,8 +9,8 @@ import { Slate, } from 'slate-react' import {DOMRange} from 'slate-react/dist/utils/dom' -import {composeRenderElements, RenderElementFunc} from 'commons' -import useCreateEditor from 'useCreateEditor' +import {composeRenderElements, RenderElementFunc} from './commons' +import useCreateEditor from './useCreateEditor' type Plugin = { withPlugin?: (editor: T) => T @@ -56,7 +56,7 @@ const useComposePlugin = < pluginKey: string, composer: (...func: C[]) => P, plugins: Plugin[] -): P => { +): P | undefined => { const reducedPlugins = plugins?.reduce( (nextPlugin, plugin) => @@ -65,15 +65,20 @@ const useComposePlugin = < [] as C[] ) || ([] as C[]) // @ts-ignore - return React.useCallback(composer(...reducedPlugins), []) + return reducedPlugins.length + ? // @ts-ignore + React.useCallback(composer(...reducedPlugins), []) + : undefined } -const Editable = (props: Props): React.ReactNode => { - const {value, onChange, plugins, editorRef, ...editableProps} = props +const Editable = (props: Props): JSX.Element => { + const {value, onChange, plugins = [], editorRef, ...editableProps} = props const renderElement = useComposePlugin< - (props: RenderElementProps) => JSX.Element, + ((props: RenderElementProps) => JSX.Element) | undefined, RenderElementFunc - >('renderElement', composeRenderElements, plugins || []) + >('renderElement', composeRenderElements, plugins) + + console.log(renderElement) const editor = useCreateEditor() diff --git a/packages/slate-plugin-composer/src/index.tsx b/packages/slate-plugin-composer/src/index.tsx index a534b24..07098af 100644 --- a/packages/slate-plugin-composer/src/index.tsx +++ b/packages/slate-plugin-composer/src/index.tsx @@ -1 +1 @@ -export {default as Editable} from 'Editable' +export {default as Editable} from './Editable' diff --git a/packages/slate-plugin-composer/src/useCreateEditor.ts b/packages/slate-plugin-composer/src/useCreateEditor.ts index 060baa7..e23eea3 100644 --- a/packages/slate-plugin-composer/src/useCreateEditor.ts +++ b/packages/slate-plugin-composer/src/useCreateEditor.ts @@ -1,7 +1,7 @@ import * as React from 'react' import {createEditor} from 'slate' import {withReact} from 'slate-react' -import {compose} from 'commons' +import {compose} from './commons' const useCreateEditor = () => { // @ts-ignore diff --git a/playground/src/SlateComposer.stories.tsx b/playground/src/SlateComposer.stories.tsx new file mode 100644 index 0000000..0b6d15e --- /dev/null +++ b/playground/src/SlateComposer.stories.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import {Story, Meta} from '@storybook/react/types-6-0' +import Editor, {Props} from './SlateComposer' + +export default { + component: Editor, + title: 'slate-plugin-composer', +} as Meta + +const Template: Story = (args) => + +export const Default = Template.bind({}) +Default.args = {} diff --git a/playground/src/SlateComposer.tsx b/playground/src/SlateComposer.tsx new file mode 100644 index 0000000..792d3ef --- /dev/null +++ b/playground/src/SlateComposer.tsx @@ -0,0 +1,22 @@ +import {useState, useMemo, useEffect, FC} from 'react' +import {createEditor, Descendant} from 'slate' +import {Editable} from '@imdbsd/slate-plugin-composer' + +export type Props = { + value: string +} +const Editor: FC = (props) => { + const [value, setValue] = useState([ + { + type: 'paragraph', + children: [ + { + text: `Slate paste url example, try block some text and paste url or github url to the blocked text.`, + }, + ], + }, + ]) + return +} + +export default Editor diff --git a/yarn.lock b/yarn.lock index 534fdbd..6489e91 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7922,11 +7922,6 @@ immer@^8.0.1: resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.4.tgz#3a21605a4e2dded852fb2afd208ad50969737b7a" integrity sha512-jMfL18P+/6P6epANRvRk6q8t+3gGhqsJ9EuJ25AXE+9bNTYtssvzeYbEd0mXRYWCmmXSIbnlpz6vd6iJlmGGGQ== -immer@^9.0.6: - version "9.0.12" - resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.12.tgz#2d33ddf3ee1d247deab9d707ca472c8c942a0f20" - integrity sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA== - import-cwd@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9" @@ -8445,11 +8440,6 @@ is-plain-object@^2.0.3, is-plain-object@^2.0.4: dependencies: isobject "^3.0.1" -is-plain-object@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344" - integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q== - is-potential-custom-element-name@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.0.tgz#0c52e54bcca391bb2c494b21e8626d7336c6e397" @@ -12971,20 +12961,6 @@ slate-react@0.64.0: scroll-into-view-if-needed "^2.2.20" tiny-invariant "1.0.6" -slate-react@^0.72.8: - version "0.72.8" - resolved "https://registry.yarnpkg.com/slate-react/-/slate-react-0.72.8.tgz#b6b5d88ce8f89ba26965066b628757c60866cb23" - integrity sha512-asgRV/msGqfzm6cPxhrRo2Iuj5RhoDvicfkwpVD63b4K4yfPpL7a8sx0zO5WY7gqggBLjrYnNth6mAbdlHPzMg== - dependencies: - "@types/is-hotkey" "^0.1.1" - "@types/lodash" "^4.14.149" - direction "^1.0.3" - is-hotkey "^0.1.6" - is-plain-object "^5.0.0" - lodash "^4.17.4" - scroll-into-view-if-needed "^2.2.20" - tiny-invariant "1.0.6" - slate@0.63.0: version "0.63.0" resolved "https://registry.yarnpkg.com/slate/-/slate-0.63.0.tgz#63a50c45a8971d350a3ebeef25e10cd9fa5c7726" @@ -12997,15 +12973,6 @@ slate@0.63.0: is-plain-object "^3.0.0" tiny-warning "^1.0.3" -slate@^0.72.8: - version "0.72.8" - resolved "https://registry.yarnpkg.com/slate/-/slate-0.72.8.tgz#5a018edf24e45448655293a68bfbcf563aa5ba81" - integrity sha512-/nJwTswQgnRurpK+bGJFH1oM7naD5qDmHd89JyiKNT2oOKD8marW0QSBtuFnwEbL5aGCS8AmrhXQgNOsn4osAw== - dependencies: - immer "^9.0.6" - is-plain-object "^5.0.0" - tiny-warning "^1.0.3" - slice-ansi@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"