feat(texteditor): initial standalone tiptap editor component

contentcuration/contentcuration/dev_urls.py

@@ -8,6 +8,7 @@
 from django.urls import include
 from django.urls import path
 from django.urls import re_path
+from django.views.generic import TemplateView
 from drf_yasg import openapi
 from drf_yasg.views import get_schema_view
 from rest_framework import permissions
@@ -75,3 +76,10 @@ def file_server(request, storage_path=None):
     re_path(r"^api-auth/", include("rest_framework.urls", namespace="rest_framework")),
     re_path(r"^content/(?P<storage_path>.+)$", file_server),
 ]
+
+urlpatterns += [
+    re_path(
+        r"^editor-dev(?:/.*)?$",
+        TemplateView.as_view(template_name="contentcuration/editor_dev.html"),
+    ),
+]

contentcuration/contentcuration/frontend/channelEdit/router.js

@@ -11,10 +11,16 @@ import ReviewSelectionsPage from './views/ImportFromChannels/ReviewSelectionsPag
 import EditModal from './components/edit/EditModal';
 import ChannelDetailsModal from 'shared/views/channel/ChannelDetailsModal';
 import ChannelModal from 'shared/views/channel/ChannelModal';
+import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
 import { RouteNames as ChannelRouteNames } from 'frontend/channelList/constants';
 
 const router = new VueRouter({
   routes: [
+    {
+      path: '/editor-dev',
+      name: 'TipTapEditorDev',
+      component: TipTapEditor,
+    },
     {
       name: RouteNames.TREE_ROOT_VIEW,
       path: '/',

contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue

@@ -277,9 +277,9 @@
       },
     },
     created() {
-      this.loadContentNodes({ parent__in: [this.rootId] }),
-      this.loadAncestors({ id: this.nodeId }),
-      this.loadNodes();
+      (this.loadContentNodes({ parent__in: [this.rootId] }),
+       this.loadAncestors({ id: this.nodeId }),
+       this.loadNodes());
     },
     mounted() {
       this.updateTabTitle(this.$store.getters.appendChannelName(this.$tr('trashModalTitle')));

contentcuration/contentcuration/frontend/editorDev/index.js

@@ -0,0 +1,24 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
+import TipTapEditor from '../shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
+import startApp from 'shared/app';
+import storeFactory from 'shared/vuex/baseStore';
+
+Vue.use(VueRouter);
+Vue.use(Vuex);
+
+// Create a minimal store that has the required methods
+const store = storeFactory();
+
+startApp({
+  store, // Provide the store - this is required Althought not needed
+  router: new VueRouter({
+    routes: [
+      {
+        path: '/',
+        component: TipTapEditor,
+      },
+    ],
+  }),
+});

contentcuration/contentcuration/frontend/editorDev/router.js

@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+import TipTapEditor from '../shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
+
+Vue.use(Router);
+export default new Router({
+  mode: 'history',
+  base: '/editor-dev/',
+  routes: [{ path: '/', component: TipTapEditor }],
+});

contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/mathquill/mathquill.js

@@ -2794,7 +2794,7 @@ JS environment could actually contain many instances. */
           // skip matching top-level close tag and all tag pairs in between
           var nesting = 1;
           do {
-            (i += 1), (token = tokens[i]);
+            ((i += 1), (token = tokens[i]));
             pray('no missing close tags', token);
             // close tags
             if (token.slice(0, 2) === '</') {
@@ -3919,7 +3919,7 @@ case '!':
           i = 0;
         // FIXME: l.ctrlSeq === l.letter checks if first or last in an operator name
         while (l instanceof Letter && l.ctrlSeq === l.letter && i < maxLength) {
-          (str = l.letter + str), (l = l[L]), (i += 1);
+          ((str = l.letter + str), (l = l[L]), (i += 1));
         }
         // check for an autocommand, going thru substrings longest to shortest
         while (str.length) {
@@ -5039,7 +5039,7 @@ case '!':
           brack.bubble('reflow');
         }
       } else {
-        (brack = this), (side = brack.side);
+        ((brack = this), (side = brack.side));
         if (brack.replacedFragment) brack.side = 0;
         // wrapping seln, don't be one-sided
         else if (cursor[-side]) {
@@ -5279,7 +5279,7 @@ case '!':
     };
     _.parser = function () {
       var self = this;
-      (string = Parser.string), (regex = Parser.regex), (succeed = Parser.succeed);
+      ((string = Parser.string), (regex = Parser.regex), (succeed = Parser.succeed));
       return string('{')
         .then(regex(/^[a-z][a-z0-9]*/i))
         .skip(string('}'))

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue

@@ -0,0 +1,99 @@
+<template>
+
+  <div class="editor-container">
+    <EditorToolbar />
+    <EditorContentWrapper />
+  </div>
+
+</template>
+
+
+<script>
+
+  import { defineComponent, provide } from 'vue';
+  import EditorToolbar from './components/EditorToolbar.vue';
+  import EditorContentWrapper from './components/EditorContentWrapper.vue';
+  import { useEditor } from './composables/useEditor';
+
+  export default defineComponent({
+    name: 'RichTextEditor',
+    components: {
+      EditorToolbar,
+      EditorContentWrapper,
+    },
+    setup() {
+      const { editor, isReady } = useEditor();
+
+      // Provide editor instance to all child components
+      provide('editor', editor);
+      provide('isReady', isReady);
+    },
+  });
+
+</script>
+
+
+<style scoped>
+
+  .editor-container {
+    width: 1000px;
+    margin: 40px auto;
+    font-family:
+      'Noto Sans',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      'Helvetica Neue',
+      Arial,
+      sans-serif;
+    background: white;
+    border: 1px solid #e1e5e9;
+    border-radius: 8px;
+  }
+
+</style>
+
+
+<!-- Non-scoped styles for typography that apply to editor content -->
+<style>
+
+  .editor-container h1 {
+    margin: 24px 0 16px;
+    font-size: 32px;
+    font-weight: 600;
+  }
+
+  .editor-container h2 {
+    margin: 8px 0;
+    font-size: 24px;
+    font-weight: 600;
+  }
+
+  .editor-container h3 {
+    margin: 8px 0;
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  .editor-container p {
+    margin: 8px 0;
+    font-size: 16px;
+  }
+
+  .editor-container small {
+    margin: 4px 0;
+    font-size: 12px;
+  }
+
+  .editor-container ul,
+  .editor-container ol {
+    padding-left: 20px;
+    margin: 10px 0;
+    margin-inline-start: 20px;
+  }
+
+  .editor-container li {
+    margin: 4px 0;
+  }
+
+</style>

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js

@@ -0,0 +1,160 @@
+import { createTranslator } from 'shared/i18n';
+
+const NAMESPACE = 'TipTapEditorStrings';
+
+const MESSAGES = {
+  // Toolbar button labels & alt text
+  undo: {
+    message: 'Undo',
+    context: 'Button to undo the last action in the text editor',
+  },
+  redo: {
+    message: 'Redo',
+    context: 'Button to redo the last undone action in the text editor',
+  },
+  bold: {
+    message: 'Strong',
+    context: 'Button to make text bold/strong',
+  },
+  italic: {
+    message: 'Italic',
+    context: 'Button to italicize the selected text',
+  },
+  underline: {
+    message: 'Underline',
+    context: 'Button to underline the selected text',
+  },
+  strikethrough: {
+    message: 'Strikethrough',
+    context: 'Button to strikethrough the selected text',
+  },
+  copy: {
+    message: 'Copy',
+    context: 'Button to copy the selected text',
+  },
+  paste: {
+    message: 'Paste',
+    context: 'Button to paste text from clipboard',
+  },
+  pasteWithoutFormatting: {
+    message: 'Paste without formatting',
+    context: 'Button to paste text without any formatting',
+  },
+  bulletList: {
+    message: 'Bullet list',
+    context: 'Button to create a bullet list',
+  },
+  numberedList: {
+    message: 'Numbered list',
+    context: 'Button to create a numbered list',
+  },
+  subscript: {
+    message: 'Subscript',
+    context: 'Button to make text subscript',
+  },
+  superscript: {
+    message: 'Superscript',
+    context: 'Button to make text superscript',
+  },
+  insertImage: {
+    message: 'Insert image',
+    context: 'Button to insert an image',
+  },
+  insertLink: {
+    message: 'Insert link',
+    context: 'Button to insert a hyperlink',
+  },
+  mathFormula: {
+    message: 'Math formula',
+    context: 'Button to insert a mathematical formula',
+  },
+  codeBlock: {
+    message: 'Code block',
+    context: 'Button to insert a block of code',
+  },
+
+  // Format dropdown options
+  formatNormal: {
+    message: 'Normal',
+    context: 'Option to set text format to normal',
+  },
+  formatSmall: {
+    message: 'Small',
+    context: 'Option to set text format to small',
+  },
+  formatHeader1: {
+    message: 'Header 1',
+    context: 'Option to set text format to header 1',
+  },
+  formatHeader2: {
+    message: 'Header 2',
+    context: 'Option to set text format to header 2',
+  },
+  formatHeader3: {
+    message: 'Header 3',
+    context: 'Option to set text format to header 3',
+  },
+
+  // Accessibility labels
+  textFormattingToolbar: {
+    message: 'Text formatting toolbar',
+    context: 'Toolbar for text formatting options',
+  },
+  historyActions: {
+    message: 'History actions',
+    context: 'Actions for managing history of changes',
+  },
+  textFormattingOptions: {
+    message: 'Text formatting options',
+    context: 'Options for formatting text',
+  },
+  textStyleFormatting: {
+    message: 'Text style formatting',
+    context: 'Formatting options for text styles',
+  },
+  copyAndPasteActions: {
+    message: 'Copy and paste actions',
+    context: 'Actions for copying and pasting text',
+  },
+  listFormatting: {
+    message: 'List formatting',
+    context: 'Options for formatting lists',
+  },
+  scriptFormatting: {
+    message: 'Script formatting',
+    context: 'Options for formatting scripts',
+  },
+  insertTools: {
+    message: 'Insert tools',
+    context: 'Tools for inserting elements into the text',
+  },
+  textFormatOptions: {
+    message: 'Text format options',
+    context: 'Options for text formatting',
+  },
+  formatOptions: {
+    message: 'Format options',
+    context: 'General options for formatting',
+  },
+  pasteOptions: {
+    message: 'Paste options',
+    context: 'Options for pasting text',
+  },
+  pasteOptionsMenu: {
+    message: 'Paste options menu',
+    context: 'Menu for selecting paste options',
+  },
+  clipboardAccessFailed: {
+    message: 'Clipboard access failed. Try copying again.',
+    context: 'Message shown when clipboard access fails during paste operation',
+  },
+};
+
+let TipTapEditorStrings = null;
+
+export function getTipTapEditorStrings() {
+  if (!TipTapEditorStrings) {
+    TipTapEditorStrings = createTranslator(NAMESPACE, MESSAGES);
+  }
+  return TipTapEditorStrings;
+}