right idea but I still get an apostrophe-rich-text editor somehow

apostrophecms · Sep 22, 2019 · 6f70a78 · 6f70a78
1 parent 48b6536
commit 6f70a78
Show file tree

Hide file tree

Showing 4 changed files with 182 additions and 117 deletions.
diff --git a/README.md b/README.md
@@ -59,6 +59,9 @@ In addition, the following toolbar items are accepted natively:
 `blockquote`
 `code_block`
 `styles`
+`undo`
+`redo`
+`table`
 
 All of these require no configuration, with the exception of `styles`. The `styles` toolbar item, if present, must be configured via the `styles` option. It is used to provide a choice of block elements, potentially with a choice of CSS classes:
 
@@ -113,6 +116,42 @@ And that will become part of the assets pushed to your browser from this point o
 
 These are advanced techniques requiring a good understanding of tiptap internals.
 
+## Using this widget for just *some* of your rich text
+
+By default, this module "improves" `apostrophe-rich-text-widgets`, meaning that all of your rich text will use Tiptap.
+
+It is also possible to enable it only for certain subclasses of `apostrophe-rich-text-widgets`. Here is how to do it, in `app.js`:
+
+```javascript
+modules: {
+  'apostrophe-tiptap-rich-text-widgets': {},
+  'apostrophe-rich-text-widgets': {
+    tiptap: false
+  },
+  'apostrophe-tiptap-widgets': {
+    extend: 'apostrophe-rich-text-widgets',
+    tiptap: true
+  }
+}
+```
+
+In a template you may now use both:
+
+```javascript
+apos.area(data.page, 'body', {
+  widgets: {
+    'apostrophe-rich-text': {
+      toolbar: [ 'Bold', 'Italic', 'Link' ]
+    },
+    'apostrophe-tiptap': {
+      toolbar: [ 'bold', 'italic', 'link', 'table' ]
+    }
+  }
+});
+```
+
+> We don't use `apostrophe-tiptap-rich-text` as the widget name because that is the name of this npm module, which enhances all rich text widgets via the `improve` keyword and is not available for direct use as a module name in its own right.
+
 ## Contributing to this module
 
 Feel free! Be aware that if you add or modify Vue components and extensions in the npm module itself, you will need to run:

diff --git a/index.js b/index.js
@@ -7,117 +7,131 @@ const fs = require('fs-extra');
 module.exports = {
   improve: 'apostrophe-rich-text-widgets',
 
-  browser: {
-    components: {
-      widgetEditor: 'ApostropheRichTextWidgetEditor'
-    },
-    tools: {
-      'styles': {
-        component: 'ApostropheTiptapStyles',
-        label: 'Styles'
+  beforeConstruct: function(self, options) {
+    options.browser = Object.assign({}, {
+      components: {
+        widgetEditor: 'ApostropheRichTextWidgetEditor'
       },
-      '|': {
-        component: 'ApostropheTiptapDivider',
-        icon: 'PowerOn'
-      },
-      'bold': {
-        component: 'ApostropheTiptapButton',
-        label: 'Bold',
-        icon: 'FormatBold'
-      },
-      'italic': {
-        component: 'ApostropheTiptapButton',
-        label: 'Italic',
-        icon: 'FormatItalic'
-      },
-      'horizontal_rule': {
-        component: 'ApostropheTiptapButton',
-        label: 'Horizontal Rule',
-        icon: 'WindowMinimize'
-      },
-      'link': {
-        component: 'ApostropheTiptapLink',
-        label: 'Link',
-        icon: 'Link'
-      },
-      'bullet_list': {
-        component: 'ApostropheTiptapButton',
-        label: 'Bullets',
-        icon: 'FormatListBulleted'
-      },
-      'ordered_list': {
-        component: 'ApostropheTiptapButton',
-        label: 'Ordered',
-        icon: 'FormatListNumbered'
-      },
-      'strike': {
-        component: 'ApostropheTiptapButton',
-        label: 'Strike',
-        icon: 'FormatStrikethrough'
-      },
-      'blockquote': {
-        component: 'ApostropheTiptapButton',
-        label: 'Blockquote',
-        icon: 'FormatQuoteOpen'
-      },
-      'code_block': {
-        component: 'ApostropheTiptapButton',
-        label: 'Code Block',
-        icon: 'CodeBraces'
-      },
-      'undo': {
-        component: 'ApostropheTiptapButton',
-        label: 'Undo',
-        icon: 'Undo'
-      },
-      'redo': {
-        component: 'ApostropheTiptapButton',
-        label: 'Redo',
-        icon: 'Redo'
-      },
-      'table': {
-        component: 'ApostropheTiptapTable',
-        icon: 'Table',
-        // createTable is always allowed when this component is present in the toolbar,
-        // these are the actions allowed on an existing table
-        actions: [ 'deleteTable', 'addColumnBefore', 'addColumnAfter', 'deleteColumn', 'addRowBefore', 'addRowAfter', 'deleteRow', 'toggleCellMerge' ],
-        icons: {
-          createTable: 'Table',
-          deleteTable: 'TableRemove',
-          addColumnBefore: 'TableColumnPlusBefore',
-          addColumnAfter: 'TableColumnPlusAfter',
-          deleteColumn: 'TableColumnRemove',
-          addRowBefore: 'TableRowPlusBefore',
-          addRowAfter: 'TableRowPlusAfter',
-          deleteRow: 'TableRowRemove',
-          toggleCellMerge: 'TableMergeCells'
+      tools: {
+        'styles': {
+          component: 'ApostropheTiptapStyles',
+          label: 'Styles'
+        },
+        '|': {
+          component: 'ApostropheTiptapDivider',
+          icon: 'PowerOn'
+        },
+        'bold': {
+          component: 'ApostropheTiptapButton',
+          label: 'Bold',
+          icon: 'FormatBold'
+        },
+        'italic': {
+          component: 'ApostropheTiptapButton',
+          label: 'Italic',
+          icon: 'FormatItalic'
+        },
+        'horizontal_rule': {
+          component: 'ApostropheTiptapButton',
+          label: 'Horizontal Rule',
+          icon: 'WindowMinimize'
         },
-        labels: {
-          createTable: 'Create Table',
-          deleteTable: 'Delete Table',
-          addColumnBefore: 'Add Column Before',
-          addColumnAfter: 'Add Column After',
-          deleteColumn: 'Delete Column',
-          addRowBefore: 'Add Row Before',
-          addRowAfter: 'Add Row After',
-          deleteRow: 'Delete Row',
-          toggleCellMerge: 'Merge Cells'
+        'link': {
+          component: 'ApostropheTiptapLink',
+          label: 'Link',
+          icon: 'Link'
+        },
+        'bullet_list': {
+          component: 'ApostropheTiptapButton',
+          label: 'Bullets',
+          icon: 'FormatListBulleted'
+        },
+        'ordered_list': {
+          component: 'ApostropheTiptapButton',
+          label: 'Ordered',
+          icon: 'FormatListNumbered'
+        },
+        'strike': {
+          component: 'ApostropheTiptapButton',
+          label: 'Strike',
+          icon: 'FormatStrikethrough'
+        },
+        'blockquote': {
+          component: 'ApostropheTiptapButton',
+          label: 'Blockquote',
+          icon: 'FormatQuoteOpen'
+        },
+        'code_block': {
+          component: 'ApostropheTiptapButton',
+          label: 'Code Block',
+          icon: 'CodeBraces'
+        },
+        'undo': {
+          component: 'ApostropheTiptapButton',
+          label: 'Undo',
+          icon: 'Undo'
+        },
+        'redo': {
+          component: 'ApostropheTiptapButton',
+          label: 'Redo',
+          icon: 'Redo'
+        },
+        'table': {
+          component: 'ApostropheTiptapTable',
+          icon: 'Table',
+          // createTable is always allowed when this component is present in the toolbar,
+          // these are the actions allowed on an existing table
+          actions: [ 'deleteTable', 'addColumnBefore', 'addColumnAfter', 'deleteColumn', 'addRowBefore', 'addRowAfter', 'deleteRow', 'toggleCellMerge' ],
+          icons: {
+            createTable: 'Table',
+            deleteTable: 'TableRemove',
+            addColumnBefore: 'TableColumnPlusBefore',
+            addColumnAfter: 'TableColumnPlusAfter',
+            deleteColumn: 'TableColumnRemove',
+            addRowBefore: 'TableRowPlusBefore',
+            addRowAfter: 'TableRowPlusAfter',
+            deleteRow: 'TableRowRemove',
+            toggleCellMerge: 'TableMergeCells'
+          },
+          labels: {
+            createTable: 'Create Table',
+            deleteTable: 'Delete Table',
+            addColumnBefore: 'Add Column Before',
+            addColumnAfter: 'Add Column After',
+            deleteColumn: 'Delete Column',
+            addRowBefore: 'Add Row Before',
+            addRowAfter: 'Add Row After',
+            deleteRow: 'Delete Row',
+            toggleCellMerge: 'Merge Cells'
+          }
         }
       }
-    }
+    }, options.browser || {});
   },
 
   construct: function(self, options) {
 
     const superGetCreateSingletonOptions = self.getCreateSingletonOptions;
     self.getCreateSingletonOptions = function(req) {
-      return { 
-        ...superGetCreateSingletonOptions(req),
-        tools: self.options.browser.tools,
-        components: self.options.browser.components
-      };
+      if (options.tiptap === false) {
+        return { 
+          ...superGetCreateSingletonOptions(req),
+          tiptap: false
+        };
+      } else {
+        const result = { 
+          ...superGetCreateSingletonOptions(req),
+          tools: self.options.browser.tools,
+          components: self.options.browser.components
+        };
+        return result;
+      }
     };
 
+    if (options.tiptap === false) {
+      return;
+    }
+
     const superPushAssets = self.pushAssets;
     self.pushAssets = function() {
       // If project level bundle exists, push that instead.

diff --git a/public/js/always.js b/public/js/always.js
@@ -2,23 +2,25 @@ apos.define('apostrophe-rich-text-widgets', {
 
   construct: function(self, options) {
 
-    self.getData = function($widget) {
-      var content;
-      var editor = $widget.data('tiptapApp');
-      if (editor) {
-        content = editor.value.content;
-      } else {
-        content = $widget.find('[data-rich-text]:first').html();
-      }
-      // Merge with properties found in the data attribute
-      // of the widget, such as _id
-      var data = JSON.parse($widget.attr('data') || '{}');
-      _.extend(data, {
-        type: 'apostrophe-rich-text',
-        content: content
-      });
-      return data;
-    };
+    if (options.tiptap !== false) {
+      self.getData = function($widget) {
+        var content;
+        var editor = $widget.data('tiptapApp');
+        if (editor) {
+          content = editor.value.content;
+        } else {
+          content = $widget.find('[data-rich-text]:first').html();
+        }
+        // Merge with properties found in the data attribute
+        // of the widget, such as _id
+        var data = JSON.parse($widget.attr('data') || '{}');
+        _.extend(data, {
+          type: 'apostrophe-rich-text',
+          content: content
+        });
+        return data;
+      };
+    }
 
   }
 

diff --git a/public/js/editor.js b/public/js/editor.js
@@ -1,15 +1,25 @@
 apos.define('apostrophe-rich-text-widgets-editor', {
 
   afterConstruct: function(self) {
+    console.log(self.__meta.name);
+    console.log('>>', apos.modules[self.__meta.name.replace(/-editor$/, '')].options);
+    if (apos.modules[self.__meta.name.replace(/-editor$/, '')].options.tiptap === false) {
+      return;
+    }
     return self.start();
   },
 
   construct: function(self, options) {
+    console.log(self.__meta.name);
+    console.log('>>', apos.modules[self.__meta.name.replace(/-editor$/, '')].options);
+    if (apos.modules[self.__meta.name.replace(/-editor$/, '')].options.tiptap === false) {
+      return;
+    }
 
     // Start contextual editing (on click for instance)
 
     self.start = function() {
-
+      console.log('Starting!');
       if (self.started || options.readOnly) {
         return;
       }