diff --git a/package.json b/package.json index a326d08d38..83aeed0df8 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "@trbl/react-modal": "^1.0.4", "@trbl/react-scroll-info": "^1.1.1", "@trbl/react-window-info": "^1.2.2", - "@udecode/slate-plugins": "^0.59.1", + "@udecode/slate-plugins": "^0.59.2", "async-some": "^1.0.2", "babel-loader": "^8.0.6", "body-parser": "^1.19.0", diff --git a/src/client/components/forms/field-types/RichText/CommandToolbar/ToolbarLinkButton/index.js b/src/client/components/forms/field-types/RichText/CommandToolbar/ToolbarLinkButton/index.js deleted file mode 100644 index fac7976575..0000000000 --- a/src/client/components/forms/field-types/RichText/CommandToolbar/ToolbarLinkButton/index.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { useSlate } from 'slate-react'; -import { - ToolbarButton, - isNodeInSelection, - insertLink, -} from '@udecode/slate-plugins'; - -import { nodeTypes } from '../../types'; - -const ToolbarLink = (props) => { - const { typeLink, ...rest } = props; - const editor = useSlate(); - - return ( - { - event.preventDefault(); - - const url = window.prompt('Enter the URL of the link:'); - if (!url) return; - - insertLink(editor, url, { typeLink }); - }} - {...rest} - /> - ); -}; - -ToolbarLink.defaultProps = { - typeLink: nodeTypes.UL, -}; - -ToolbarLink.propTypes = { - typeLink: PropTypes.string, -}; - -export default ToolbarLink; diff --git a/src/client/components/forms/field-types/RichText/CommandToolbar/ToolbarList/index.js b/src/client/components/forms/field-types/RichText/CommandToolbar/ToolbarList/index.js index 1a49c550fa..82a0b0ca0e 100644 --- a/src/client/components/forms/field-types/RichText/CommandToolbar/ToolbarList/index.js +++ b/src/client/components/forms/field-types/RichText/CommandToolbar/ToolbarList/index.js @@ -10,17 +10,19 @@ import { import { nodeTypes } from '../../types'; const ToolbarList = (props) => { - const { typeList, ...rest } = props; - const editor = useSlate(); + const { typeList } = props; + // const editor = useSlate(); + console.log('render'); + return null; return ( ); }; diff --git a/src/client/components/forms/field-types/RichText/CommandToolbar/index.js b/src/client/components/forms/field-types/RichText/CommandToolbar/index.js index 31adb143b7..fb4a12c8f7 100644 --- a/src/client/components/forms/field-types/RichText/CommandToolbar/index.js +++ b/src/client/components/forms/field-types/RichText/CommandToolbar/index.js @@ -1,53 +1,29 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; -import { Transforms } from 'slate'; import { useSlate, useFocused } from 'slate-react'; import { ToolbarElement, ToolbarMark, ToolbarList } from '@udecode/slate-plugins'; -import { nodeTypes, headingTypes } from '../types'; import Icons from '../icons'; +import { nodeTypes } from '../types'; import './index.scss'; const baseClass = 'command-toolbar'; -const enabledHeadings = [{ label: 'Normal Text', value: 'p' }]; - -const CommandToolbar = (props) => { - const { enabledPluginList, maxHeadingLevel, disabledMarks } = props; +const CommandToolbar = () => { const editor = useSlate(); const editorFocus = useFocused(); const [editorFocusedSelection, setEditorFocusedSelection] = useState(editorFocus); - const headingsAreEnabled = enabledPluginList?.heading; - const blockquoteIsEnabled = enabledPluginList?.blockquote; - - const onHeadingSelectChange = (headingType) => { - if (editorFocusedSelection) { - Transforms.select(editor, editorFocusedSelection); - editor.toggleType(headingType); - } - }; useEffect(() => { - if (editorFocus && editor.selection) setEditorFocusedSelection(editor.selection); + if (editorFocus && editor.selection) { + setEditorFocusedSelection(editor.selection); + } }, [editorFocus, editorFocusedSelection, editor.selection]); - useEffect(() => { - if (headingsAreEnabled) { - Array.from(Array(maxHeadingLevel)).forEach((_, index) => { - enabledHeadings.push({ - label: `Heading ${index + 1}`, - value: headingTypes[index], - }); - }); - } - }, [headingsAreEnabled, maxHeadingLevel]); - return (
- -
- +
} @@ -78,10 +54,22 @@ const CommandToolbar = (props) => { icon={} /> + } + /> + } /> +
+ +
+ } + /> { type={nodeTypes.typeStrikethrough} icon={} /> +
+
{ + return ( + + ); +}; + +export default CodeBlockIcon; diff --git a/src/client/components/forms/field-types/RichText/icons/OrderedList/index.js b/src/client/components/forms/field-types/RichText/icons/OrderedList/index.js index d9faebf99f..ecd08f9e22 100644 --- a/src/client/components/forms/field-types/RichText/icons/OrderedList/index.js +++ b/src/client/components/forms/field-types/RichText/icons/OrderedList/index.js @@ -10,7 +10,10 @@ const OrderedListIcon = () => { xmlns="http://www.w3.org/2000/svg" className="graphic ordered-list-icon" > - + BlockquotePlugin(options), - bold: options => BoldPlugin(options), - code: options => CodePlugin(options), - heading: options => HeadingPlugin(options), - image: options => ImagePlugin(options), - italic: options => ItalicPlugin(options), - list: options => ListPlugin(options), - paragraph: options => ParagraphPlugin(options), - strikethrough: options => StrikethroughPlugin(options), - underline: options => UnderlinePlugin(options), -}; +const plugins = [ + BlockquotePlugin(), + BoldPlugin(), + CodePlugin({ hotkey: 'mod+shift+c' }), + CodeBlockPlugin(), + HeadingPlugin(), + ImagePlugin(), + ItalicPlugin(), + ListPlugin(), + ParagraphPlugin(), + StrikethroughPlugin(), + UnderlinePlugin(), + SoftBreakPlugin({ + rules: [ + { hotkey: 'shift+enter' }, + { + hotkey: 'enter', + query: { + allow: [nodeTypes.typeCodeBlock, nodeTypes.typeBlockquote], + }, + }, + ], + }), +]; -const enabledPluginFunctions = []; const withPlugins = [ withReact, withHistory, withList(nodeTypes), withToggleType({ defaultType: nodeTypes.typeP }), - withResetBlockType({ - types: [nodeTypes.typeActionItem], - defaultType: nodeTypes.typeP, - }), ]; const baseClass = 'rich-text'; @@ -78,9 +82,6 @@ const RichText = (props) => { label, placeholder, readOnly, - disabledPlugins, - disabledMarks, - maxHeadingLevel, } = props; const editor = useMemo(() => pipe(createEditor(), ...withPlugins), []); @@ -108,61 +109,13 @@ const RichText = (props) => { useEffect(() => { setValue(internalState); }, [setValue, internalState]); useEffect(() => { + // ! could use review if (value !== undefined && !valueHasLoaded) { setInternalState(value); setValueHasLoaded(true); } }, [value, valueHasLoaded]); - useEffect(() => { - // remove plugins disabled in config - if (disabledPlugins.length > 0) { - disabledPlugins.forEach((pluginKey) => { - delete enabledPluginList[pluginKey]; - }); - } - - // push the rest to enabledPlugins - Object.keys(enabledPluginList).forEach((plugin) => { - const options = { editor }; - if (plugin === 'heading' && maxHeadingLevel < 6) { - options.levels = maxHeadingLevel; - } - - enabledPluginFunctions.push(enabledPluginList[plugin](options)); - enabledPluginFunctions.push(SoftBreakPlugin({ - rules: [ - { hotkey: 'shift+enter' }, - { - hotkey: 'enter', - query: { - allow: [nodeTypes.typeCodeBlock, nodeTypes.typeBlockquote], - }, - }, - ], - })); - }); - enabledPluginFunctions.push(ExitBreakPlugin({ - rules: [ - { - hotkey: 'mod+enter', - }, - { - hotkey: 'mod+shift+enter', - before: true, - }, - // { - // hotkey: 'enter', - // query: { - // start: true, - // end: true, - // allow: headingTypes, - // }, - // }, - ], - })); - }, [disabledPlugins, maxHeadingLevel]); - const classes = [ baseClass, 'field-type', @@ -193,14 +146,10 @@ const RichText = (props) => { value={internalState ?? emptyRichTextNode} onChange={val => setInternalState(val)} > - + @@ -221,9 +170,6 @@ RichText.defaultProps = { style: {}, validate: richText, path: '', - disabledPlugins: [], - disabledMarks: [], - maxHeadingLevel: 6, }; RichText.propTypes = { @@ -238,9 +184,6 @@ RichText.propTypes = { width: PropTypes.string, style: PropTypes.shape({}), label: PropTypes.string, - disabledPlugins: PropTypes.arrayOf(PropTypes.string), - disabledMarks: PropTypes.arrayOf(PropTypes.string), - maxHeadingLevel: PropTypes.number, }; export default RichText; diff --git a/src/client/components/forms/field-types/RichText/plugins/Elements/Blockquote/BlockquotePlugin.js b/src/client/components/forms/field-types/RichText/plugins/Elements/Blockquote/BlockquotePlugin.js deleted file mode 100644 index bd59470456..0000000000 --- a/src/client/components/forms/field-types/RichText/plugins/Elements/Blockquote/BlockquotePlugin.js +++ /dev/null @@ -1,9 +0,0 @@ -import renderElementBlockquote from './renderElementBlockquote'; -import onKeyDown from './KeyDownHandler'; - -const BlockquotePlugin = (options = {}) => ({ - renderElement: renderElementBlockquote(options), - onKeyDown: e => onKeyDown(e, options), -}); - -export default BlockquotePlugin; diff --git a/src/client/components/forms/field-types/RichText/plugins/Elements/Blockquote/Components/README.md b/src/client/components/forms/field-types/RichText/plugins/Elements/Blockquote/Components/README.md deleted file mode 100644 index 1a51b6b2a5..0000000000 --- a/src/client/components/forms/field-types/RichText/plugins/Elements/Blockquote/Components/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# Components - -These are the components that make up the element to render, strictly visual. diff --git a/src/client/components/forms/field-types/RichText/plugins/Elements/Blockquote/Components/blockquote.js b/src/client/components/forms/field-types/RichText/plugins/Elements/Blockquote/Components/blockquote.js deleted file mode 100644 index a67d7800fd..0000000000 --- a/src/client/components/forms/field-types/RichText/plugins/Elements/Blockquote/Components/blockquote.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import './blockquote.scss'; - -const BlockquoteElement = ({ attributes, children }) => { - return
{children}
; -}; - -BlockquoteElement.propTypes = { - attributes: PropTypes.shape({}).isRequired, - children: PropTypes.node.isRequired, -}; - -export default BlockquoteElement; diff --git a/src/client/components/forms/field-types/RichText/plugins/Elements/Blockquote/Components/blockquote.scss b/src/client/components/forms/field-types/RichText/plugins/Elements/Blockquote/Components/blockquote.scss deleted file mode 100644 index 403f935ee0..0000000000 --- a/src/client/components/forms/field-types/RichText/plugins/Elements/Blockquote/Components/blockquote.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import '../../../../../../../../scss/styles'; - -blockquote { - padding: 10px 20px 10px 16px; - border-left: 2px solid $color-light-gray; -} diff --git a/src/client/components/forms/field-types/RichText/plugins/Elements/Blockquote/KeyDownHandler/index.js b/src/client/components/forms/field-types/RichText/plugins/Elements/Blockquote/KeyDownHandler/index.js deleted file mode 100644 index cb6e654b67..0000000000 --- a/src/client/components/forms/field-types/RichText/plugins/Elements/Blockquote/KeyDownHandler/index.js +++ /dev/null @@ -1,30 +0,0 @@ -// need to determine if current selection is within a blockquote -// if it is, is it empty? -// if its empty, is the key the delete key? -// if the key === delete, toggle the element type off -// if the key combo === 'mod+alt' insert soft break - -// use editor, to get current selection and type - -import { Editor } from 'slate'; -import { - isNodeInSelection, isBlockTextEmpty, getTextFromBlockStartToAnchor, -} from '@udecode/slate-plugins'; - -const onKeyDown = (e, options) => { - const { editor } = options; - const isInsideBlockquote = isNodeInSelection(editor, 'blockquote'); - const currentKey = e.key; - - // check to see if we are in a blockquote - if (!isInsideBlockquote) return null; - const selectionText = getTextFromBlockStartToAnchor(editor); - console.log(selectionText); - // check to see if there is text inside the blockquote - // const blockTextIsEmpty = isBlockTextEmpty(match); - // console.log(blockTextIsEmpty); - // if (blockTextIsEmpty) return null; - // return 'test'; -}; - -export default onKeyDown; diff --git a/src/client/components/forms/field-types/RichText/plugins/Elements/Blockquote/Transforms/index.js b/src/client/components/forms/field-types/RichText/plugins/Elements/Blockquote/Transforms/index.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/client/components/forms/field-types/RichText/plugins/Elements/Blockquote/renderElementBlockquote.js b/src/client/components/forms/field-types/RichText/plugins/Elements/Blockquote/renderElementBlockquote.js deleted file mode 100644 index b529196d78..0000000000 --- a/src/client/components/forms/field-types/RichText/plugins/Elements/Blockquote/renderElementBlockquote.js +++ /dev/null @@ -1,14 +0,0 @@ -import { getRenderElement } from '@udecode/slate-plugins'; - -import { nodeTypes } from '../../../types'; -import BlockquoteElement from './Components/blockquote'; - -const renderElementBlockquote = ({ - typeBlockquote = nodeTypes.typeBlockquote, - component = BlockquoteElement, -}) => getRenderElement({ - type: typeBlockquote, - component, -}); - -export default renderElementBlockquote; diff --git a/yarn.lock b/yarn.lock index 5ffd4a1727..6c49afc61e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1524,10 +1524,10 @@ dependencies: "@types/yargs-parser" "*" -"@udecode/slate-plugins@^0.59.1": - version "0.59.1" - resolved "https://registry.yarnpkg.com/@udecode/slate-plugins/-/slate-plugins-0.59.1.tgz#996f023ac3f081a676c3c4fb76cbeb5f18361d7a" - integrity sha512-bz+ziUELANDBEYI8cGb5jXOKPol/l/WJJ3M7EJPdx647Gf79DM/qne4/MP201iZZ4TMuLSBovaBGNfQh+/wVmg== +"@udecode/slate-plugins@^0.59.2": + version "0.59.2" + resolved "https://registry.yarnpkg.com/@udecode/slate-plugins/-/slate-plugins-0.59.2.tgz#d72765520271647419228c49e78d4c0bca86d4a1" + integrity sha512-rBrdK5j67YYIJmkjSNX4GXrhDvmX4/rrBBTLMd8h7BN1gR90qbon5oS6yIkW8c25eQFfMtVulP6LeuPkMnTREw== dependencies: "@tippyjs/react" "^4.0.2" "@uifabric/styling" "^7.12.11"