Replace slate-plugins with its successor, plate

.circleci/config.yml

@@ -10,8 +10,8 @@ jobs:
     steps:
       - checkout
       - node/install:
-          node-version: 14.17.4
-          npm-version: 6.14.14
+          node-version: 16.17.0
+          npm-version: 8.15.0
       - restore_cache:
           keys:
             - node-deps-v3-{{ checksum "packages/web/package-lock.json" }}

packages/j-db-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@journaly/j-db-client",
-  "version": "13.19.0",
+  "version": "13.19.1",
   "description": "Journaly's internal database client.",
   "main": "dist/index",
   "scripts": {
@@ -24,10 +24,10 @@
   "author": "Journaly",
   "license": "ISC",
   "dependencies": {
-    "@prisma/client": "3.5.0"
+    "@prisma/client": "^3.15.2"
   },
   "devDependencies": {
-    "prisma": "3.5.0",
+    "prisma": "^3.15.2",
     "typescript": "4.2.4"
   }
 }

packages/web/components/FeatureComparisonTable/FeatureComparisonTable.tsx

@@ -20,9 +20,11 @@ const Feature = ({ name, plan, status }: FeatureProps) => {
       <CheckmarkCircleIcon color={color} />
       <span className={status === 'coming soon' ? 'coming-soon' : ''}>{name}</span>
       <style jsx>{`
-        display: flex;
-        align-items: center;
-        font-weight: 600;
+        li {
+          display: flex;
+          align-items: center;
+          font-weight: 600;
+        }
 
         span {
           margin-left: 10px;

packages/web/components/JournalyEditor/JournalyEditor.tsx

@@ -1,16 +1,23 @@
 import React, { useEffect, useMemo, useCallback } from 'react'
-import { createEditor, Editor, Descendant } from 'slate'
-import { Slate, withReact } from 'slate-react'
-import { withHistory } from 'slate-history'
-import { pipe, TablePlugin, EditablePlugins } from '@udecode/slate-plugins'
+import { Editor } from 'slate'
+import {
+  createPlateEditor,
+  Plate,
+  PlateProvider,
+  PlateEditor,
+  TElement,
+  createPlugins,
+  createTablePlugin,
+  createPlateUI,
+} from '@udecode/plate'
 import isHotkey from 'is-hotkey'
 
 import theme from '@/theme'
 import PostBodyStyles from '@/components/PostBodyStyles'
 import Toolbar from './Toolbar'
 import RenderElement from './RenderElement'
 import RenderLeaf from './RenderLeaf'
-import { withLinks, withImages, toggleMark, options, MarkType } from './helpers'
+import { withLinks, withImages, toggleMark, MarkType } from './helpers'
 import usePlayPolyphonicSound from '@/hooks/usePlayPolyphonicSound'
 import useAutosavedState from '@/hooks/useAutosavedState'
 
@@ -46,14 +53,12 @@ const KEY_BLACK_LIST = new Set([
 ])
 
 type JournalyEditorProps = {
-  value: Descendant[]
-  setValue: (value: Descendant[]) => void
+  value: TElement[]
+  setValue: (value: TElement[]) => void
   slateRef: React.RefObject<Editor>
   allowInlineImages: boolean
   disabled?: boolean
 }
-const plugins = [TablePlugin(options)]
-
 const JournalyEditor = ({
   value,
   setValue,
@@ -63,16 +68,25 @@ const JournalyEditor = ({
 }: JournalyEditorProps) => {
   const renderElement = useCallback((props) => <RenderElement {...props} />, [])
   const renderLeaf = useCallback((props) => <RenderLeaf {...props} />, [])
-  const editor = useMemo(() => {
-    const withPlugins: ((ed: Editor) => Editor)[] = [withHistory, withLinks]
 
-    if (allowInlineImages) {
-      withPlugins.push(withImages)
-    }
+  const plugins = useMemo(() => {
+    return createPlugins(
+      [ createTablePlugin({}) ],
+      {
+        components: createPlateUI()
+      }
+    )
+  }, [])
+
+  const editor = useMemo(() => {
+    const editor = withLinks(createPlateEditor({
+      plugins: plugins as any
+    }) as Editor)
 
-    return pipe(withReact(createEditor()), ...withPlugins)
+    return allowInlineImages ? withImages(editor) : editor
   }, [])
 
+
   const [shouldPlayTypewriterSounds, setShouldPlayTypewriterSounds] = useAutosavedState(false, {
     key: 'shouldPlayTypewriterSounds',
   })
@@ -83,16 +97,24 @@ const JournalyEditor = ({
     1,
   )
 
-  const handlePlayTypewriterSound = (e: React.KeyboardEvent) => {
+  const onKeyDown = useCallback((event: React.KeyboardEvent) => {
     if (shouldPlayTypewriterSounds) {
-      if (KEY_BLACK_LIST.has(e.key)) return
-      else if (e.key === 'Enter') {
+      if (KEY_BLACK_LIST.has(event.key)) return
+      else if (event.key === 'Enter') {
         playTypewriterReturnSound()
       } else {
         playTypewriterSound()
       }
     }
-  }
+
+    Object.entries(HOTKEYS).forEach(([hotkey, mark]) => {
+      // Convert React keyboard event to native keyboard event
+      if (isHotkey(hotkey, event as unknown as KeyboardEvent)) {
+        event.preventDefault()
+        toggleMark(editor, mark)
+      }
+    })
+  }, [editor, shouldPlayTypewriterSounds, playTypewriterSound, playTypewriterReturnSound])
 
   useEffect(() => {
     ;(slateRef as React.MutableRefObject<Editor>).current = editor
@@ -105,36 +127,30 @@ const JournalyEditor = ({
   return (
     <div className="editor-wrapper">
       <div className="editor-container">
-        <Slate editor={editor} value={value} onChange={(value) => setValue(value)}>
-          <Toolbar
-            allowInlineImages={allowInlineImages}
-            shouldPlayTypewriterSounds={shouldPlayTypewriterSounds}
-            onToggleShouldPlayTypewriterSounds={() =>
-              setShouldPlayTypewriterSounds(!shouldPlayTypewriterSounds)
-            }
-          />
-          <EditablePlugins
-            plugins={plugins}
-            renderElement={[renderElement]}
-            renderLeaf={[renderLeaf]}
-            readOnly={disabled}
-            spellCheck
-            onKeyDown={[
-              (event: React.KeyboardEvent) => {
-                handlePlayTypewriterSound(event)
-                Object.entries(HOTKEYS).forEach(([hotkey, mark]) => {
-                  // Convert React keyboard event to native keyboard event
-                  if (isHotkey(hotkey, event as unknown as KeyboardEvent)) {
-                    event.preventDefault()
-                    toggleMark(editor, mark)
-                  }
-                })
-              },
-            ]}
-            onKeyDownDeps={[shouldPlayTypewriterSounds]}
-            data-testid="post-body"
+        <PlateProvider
+          editor={editor as PlateEditor}
+          onChange={(v) => setValue(v)}
+          value={value}
+        >
+          <Plate
+            editableProps={{
+              spellCheck: true,
+              readOnly: disabled,
+              onKeyDown: onKeyDown,
+              renderElement,
+              renderLeaf,
+            }}
+            firstChildren={(
+              <Toolbar
+                allowInlineImages={allowInlineImages}
+                shouldPlayTypewriterSounds={shouldPlayTypewriterSounds}
+                onToggleShouldPlayTypewriterSounds={() =>
+                  setShouldPlayTypewriterSounds(!shouldPlayTypewriterSounds)
+                }
+              />
+            )}
           />
-        </Slate>
+        </PlateProvider>
       </div>
       <PostBodyStyles parentClassName="editor-container" />
       <style jsx>{`

packages/web/components/JournalyEditor/RenderElement.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
-import { renderElementTable } from '@udecode/slate-plugins'
 import { useSelected, RenderElementProps } from 'slate-react'
 
-import { isImageNode, isLinkNode, isTableFamilyNode } from '@/utils/slate'
+import { isImageNode, isLinkNode } from '@/utils/slate'
 
 const ImageElement = ({ attributes, element, children }: RenderElementProps) => {
   const selected = useSelected()
@@ -25,13 +24,6 @@ const ImageElement = ({ attributes, element, children }: RenderElementProps) =>
 const RenderElement = (props: RenderElementProps) => {
   const { attributes, children, element } = props
 
-  if (isTableFamilyNode(element)) {
-    const tableElement = renderElementTable()({ attributes, children, element })
-    if (tableElement) {
-      return tableElement
-    }
-  }
-
   switch (element.type) {
     case 'block-quote':
       return <blockquote {...attributes}>{children}</blockquote>

packages/web/components/JournalyEditor/Toolbar/BaseToolbarButton.tsx

@@ -18,8 +18,10 @@ const BaseToolbarButton = ({ onClick, active, children }: ButtonProps) => {
 
       <style jsx>{`
         .toolbar-button {
-          height: 100%;
+          width: 24px;
+          height: 24px;
           padding: 1px;
+          box-sizing: content-box;
           border: none;
           border-radius: 5px;
           background-color: ${theme.colors.gray800};