update tiptap, and move away from starter kit. Add setting for disabl…

…ing shorthand for ordered list
dasmikko · Oct 19, 2022 · 1704023 · 1704023
1 parent f28dc5f
commit 1704023
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 25 deletions.
diff --git a/admin/src/components/Wysiwyg/index.js b/admin/src/components/Wysiwyg/index.js
@@ -27,6 +27,22 @@ import TableHeaderExtension from '@tiptap/extension-table-header'
 import TextStyleExtension from '@tiptap/extension-text-style'
 import CharacterCountExtension from '@tiptap/extension-character-count'
 import YouTubeExtension from '@tiptap/extension-youtube'
+import CodeExtension from '@tiptap/extension-code'
+import BoldExtension from '@tiptap/extension-bold'
+import ItalicExtension from '@tiptap/extension-italic'
+import StrikeExtension, {Strike} from '@tiptap/extension-strike'
+import OrderedListExtension from "@tiptap/extension-ordered-list"
+import BulletListExtension from '@tiptap/extension-bullet-list'
+import ListItemExtension from '@tiptap/extension-list-item'
+import GapcursorExtension from '@tiptap/extension-gapcursor'
+import BlockquoteExtension from '@tiptap/extension-blockquote'
+import CodeBlockExtension from '@tiptap/extension-code-block'
+import DocumentExtension from '@tiptap/extension-document'
+import HardBreakExtension from '@tiptap/extension-hard-break'
+import HeadingExtension from '@tiptap/extension-heading'
+import HorizontalRuleExtension from '@tiptap/extension-horizontal-rule'
+import ParagraphExtension from '@tiptap/extension-paragraph'
+import TextExtension from '@tiptap/extension-text'
 import { Color as ColorExtension } from '@tiptap/extension-color'
 import {mergeDeep} from "../../utils/merge";
 
@@ -95,6 +111,11 @@ const CSSColumnsExtension = Extension.create({
   }
 })
 
+const CustomOrderedList = OrderedListExtension.extend({
+  addInputRules() {
+    return []
+  }
+})
 
 const WysiwygContent = ({ name, onChange, value, intlLabel, labelAction, disabled, error, description, required, settings }) => {
   const { formatMessage } = useIntl();
@@ -103,14 +124,23 @@ const WysiwygContent = ({ name, onChange, value, intlLabel, labelAction, disable
   const editor = useEditor({
     extensions: [
       // Text
-      StarterKit.configure({
-        gapcursor: true,
-        code: settings.code,
-        codeBlock: settings.code,
-        blockquote: settings.blockquote,
-        horizontalRule: settings.horizontal,
-        hardBreak: settings.hardbreak
-      }),
+      DocumentExtension,
+      ParagraphExtension,
+      TextExtension,
+      BoldExtension,
+      StrikeExtension,
+      ItalicExtension,
+      GapcursorExtension,
+      ListItemExtension,
+      BulletListExtension,
+
+      settings.disableOrderedListShorthand ? CustomOrderedList : OrderedListExtension,
+      settings.code ? CodeBlockExtension : null,
+      settings.code ? CodeExtension : null,
+      settings.blockquote ? BlockquoteExtension : null,
+      settings.horizontalRule ? HorizontalRuleExtension : null,
+      settings.hardBreak ? HardBreakExtension : null,
+
       UnderlineExtension,
       TextAlignExtension.configure({
         types: ['heading', 'paragraph'],
@@ -175,7 +205,7 @@ const WysiwygContent = ({ name, onChange, value, intlLabel, labelAction, disable
           <Box>
             <FieldLabel action={labelAction} required={required}> {formatMessage(intlLabel)}</FieldLabel>
           </Box>
-          {editor && 
+          {editor &&
             <Editor
               key="editor"
               disabled={disabled}

diff --git a/admin/src/pages/HomePage/Tabs/Text.js b/admin/src/pages/HomePage/Tabs/Text.js
@@ -277,6 +277,23 @@ export default ({errors, values, handleChange, isSubmitting}) => {
         </Box>
         <Box></Box>
         <Box></Box>
+
+        <Box>
+          <ToggleInput
+            label="Disable shorthand for ordered list"
+            hint="Normally you can type: 1. and after the space it converts it to a ordered list. This can be annoying when typing dates."
+            size="S"
+            name="lists"
+            onLabel="Enabled"
+            offLabel="Disabled"
+            checked={values.disableOrderedListShorthand}
+            onChange={e => handleChange({
+              target: {
+                name: 'disableOrderedListShorthand',
+                value: !values.disableOrderedListShorthand
+              }
+            })}/>
+        </Box>
       </GridLayout>
     </Fragment>
   )

diff --git a/package.json b/package.json
@@ -28,22 +28,35 @@
   "homepage": "https://github.com/dasmikko/strapi-tiptap-editor#readme",
   "dependencies": {
     "@strapi/icons": "1.2.1",
-    "@tiptap/core": "2.0.0-beta.195",
-    "@tiptap/extension-character-count": "2.0.0-beta.195",
-    "@tiptap/extension-color": "2.0.0-beta.195",
-    "@tiptap/extension-gapcursor": "2.0.0-beta.195",
-    "@tiptap/extension-image": "2.0.0-beta.195",
-    "@tiptap/extension-link": "2.0.0-beta.195",
-    "@tiptap/extension-table": "2.0.0-beta.195",
-    "@tiptap/extension-table-cell": "2.0.0-beta.195",
-    "@tiptap/extension-table-header": "2.0.0-beta.195",
-    "@tiptap/extension-table-row": "2.0.0-beta.195",
-    "@tiptap/extension-text-align": "2.0.0-beta.195",
-    "@tiptap/extension-text-style": "2.0.0-beta.195",
-    "@tiptap/extension-underline": "2.0.0-beta.195",
-    "@tiptap/extension-youtube": "2.0.0-beta.195",
-    "@tiptap/react": "2.0.0-beta.195",
-    "@tiptap/starter-kit": "2.0.0-beta.195",
+    "@tiptap/core": "2.0.0-beta.199",
+    "@tiptap/extension-blockquote": "2.0.0-beta.199",
+    "@tiptap/extension-bold": "2.0.0-beta.199",
+    "@tiptap/extension-bullet-list": "2.0.0-beta.199",
+    "@tiptap/extension-character-count": "2.0.0-beta.199",
+    "@tiptap/extension-code": "2.0.0-beta.199",
+    "@tiptap/extension-code-block": "2.0.0-beta.199",
+    "@tiptap/extension-color": "2.0.0-beta.199",
+    "@tiptap/extension-document": "2.0.0-beta.199",
+    "@tiptap/extension-gapcursor": "2.0.0-beta.199",
+    "@tiptap/extension-hard-break": "2.0.0-beta.199",
+    "@tiptap/extension-heading": "2.0.0-beta.199",
+    "@tiptap/extension-horizontal-rule": "2.0.0-beta.199",
+    "@tiptap/extension-image": "2.0.0-beta.199",
+    "@tiptap/extension-italic": "2.0.0-beta.199",
+    "@tiptap/extension-link": "2.0.0-beta.199",
+    "@tiptap/extension-list-item": "2.0.0-beta.199",
+    "@tiptap/extension-ordered-list": "2.0.0-beta.199",
+    "@tiptap/extension-paragraph": "2.0.0-beta.199",
+    "@tiptap/extension-strike": "2.0.0-beta.199",
+    "@tiptap/extension-table": "2.0.0-beta.199",
+    "@tiptap/extension-table-cell": "2.0.0-beta.199",
+    "@tiptap/extension-table-header": "2.0.0-beta.199",
+    "@tiptap/extension-table-row": "2.0.0-beta.199",
+    "@tiptap/extension-text": "2.0.0-beta.199",
+    "@tiptap/extension-text-align": "2.0.0-beta.199",
+    "@tiptap/extension-text-style": "2.0.0-beta.199",
+    "@tiptap/extension-underline": "2.0.0-beta.199",
+    "@tiptap/extension-youtube": "2.0.0-beta.199",
     "react-icons": "4.4.0"
   },
   "peerDependencies": {

diff --git a/utils/defaults.js b/utils/defaults.js
@@ -9,6 +9,7 @@ module.exports = {
   color: true,
   align: ['left', 'center', 'right'],
   lists: ['ol', 'ul'],
+  disableOrderedListShorthand: false,
   columns: ['two', 'three'],
   table: true,
   hardbreak: true,