diff --git a/packages/slate-plugin-composer/.prettierrc b/packages/slate-plugin-composer/.prettierrc new file mode 100644 index 0000000..e396c2c --- /dev/null +++ b/packages/slate-plugin-composer/.prettierrc @@ -0,0 +1,8 @@ +{ + "endOfLine": "lf", + "semi": false, + "singleQuote": true, + "tabWidth": 2, + "trailingComma": "es5", + "bracketSpacing": false +} diff --git a/packages/slate-plugin-composer/package.json b/packages/slate-plugin-composer/package.json new file mode 100644 index 0000000..ef4b58f --- /dev/null +++ b/packages/slate-plugin-composer/package.json @@ -0,0 +1,17 @@ +{ + "name": "@imdbsd/slate-plugin-composer", + "version": "0.0.1", + "description": "Slate JS composer plugins", + "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-plugin-composer/src/Editable.tsx b/packages/slate-plugin-composer/src/Editable.tsx new file mode 100644 index 0000000..ff825a5 --- /dev/null +++ b/packages/slate-plugin-composer/src/Editable.tsx @@ -0,0 +1,92 @@ +import * as React from 'react' +import {Descendant, NodeEntry, Editor} from 'slate' +import { + Editable as SlateEditable, + RenderElementProps, + RenderLeafProps, + RenderPlaceholderProps, + ReactEditor, + Slate, +} 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?: RenderElementFunc + 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 useComposePlugin = < + P extends unknown = Function, + C extends unknown = Function +>( + pluginKey: string, + composer: (...func: C[]) => P, + plugins: Plugin[] +): P | undefined => { + 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 reducedPlugins.length + ? // @ts-ignore + React.useCallback(composer(...reducedPlugins), []) + : undefined +} + +const Editable = (props: Props): JSX.Element => { + const {value, onChange, plugins = [], editorRef, ...editableProps} = props + const renderElement = useComposePlugin< + ((props: RenderElementProps) => JSX.Element) | undefined, + RenderElementFunc + >('renderElement', composeRenderElements, plugins) + + console.log(renderElement) + + const editor = useCreateEditor() + + return ( + + + + ) +} + +export default Editable diff --git a/packages/slate-plugin-composer/src/commons.tsx b/packages/slate-plugin-composer/src/commons.tsx new file mode 100644 index 0000000..151345a --- /dev/null +++ b/packages/slate-plugin-composer/src/commons.tsx @@ -0,0 +1,19 @@ +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-plugin-composer/src/index.tsx b/packages/slate-plugin-composer/src/index.tsx new file mode 100644 index 0000000..07098af --- /dev/null +++ b/packages/slate-plugin-composer/src/index.tsx @@ -0,0 +1 @@ +export {default as Editable} from './Editable' diff --git a/packages/slate-plugin-composer/src/useCreateEditor.ts b/packages/slate-plugin-composer/src/useCreateEditor.ts new file mode 100644 index 0000000..e23eea3 --- /dev/null +++ b/packages/slate-plugin-composer/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-plugin-composer/tsconfig.json b/packages/slate-plugin-composer/tsconfig.json new file mode 100644 index 0000000..6819318 --- /dev/null +++ b/packages/slate-plugin-composer/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/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