Merge remote-tracking branch 'origin/main' into chore/spike/new-loader-mark

Author: clarencepalmer

packages/super-editor/src/assets/styles/elements/prosemirror.css

@@ -108,12 +108,12 @@ img.ProseMirror-separator {
   margin: 0 !important;
 }
 
-.ProseMirror .super-doc-tab {
+.ProseMirror .sd-editor-tab {
   display: inline-block;
   vertical-align: text-bottom;
 }
 
-.ProseMirror u .super-doc-tab:not(.pagination-inner .super-doc-tab) {
+.ProseMirror u .sd-editor-tab:not(.pagination-inner .sd-editor-tab) {
   white-space: pre;
   border-bottom: 1px solid #000;
   margin-bottom: 1.5px;
@@ -311,7 +311,7 @@ https://github.com/ProseMirror/prosemirror-tables/blob/master/demo/index.html
   z-index: -1;
 }
 
-.super-doc-dropcap {
+.sd-editor-dropcap {
   float: left;
   display: flex;
   align-items: baseline;
@@ -323,4 +323,4 @@ https://github.com/ProseMirror/prosemirror-tables/blob/master/demo/index.html
 }
 .ProseMirror-active-search-match {
   background-color: #ff6a0054;
-}
+}

packages/super-editor/src/assets/styles/elements/toolbar.css

@@ -8,7 +8,7 @@
   }
 }
 
-.n-dropdown-option .dropdown-select-icon {
+.sd-editor-toolbar-dropdown .n-dropdown-option .dropdown-select-icon {
   display: flex;
   width: 12px;
   height: 12px;

packages/super-editor/src/assets/styles/extensions/comments.css

@@ -1,7 +1,7 @@
-.comment-highlight {
+.sd-editor-comment-highlight {
   transition: background-color 250ms ease;
 }
 
-.comment-highlight:hover {
+.sd-editor-comment-highlight:hover {
   background-color: #1354FF55;
 }

packages/super-editor/src/assets/styles/extensions/mention.css

@@ -1,4 +1,4 @@
-.super-editor-mention {
+.sd-editor-mention {
   background-color: #1355ff15;
   color: #222;
   font-weight: 400;

packages/super-editor/src/assets/styles/extensions/pagination.css

@@ -45,7 +45,7 @@
 Workaround to display pagination in footer 
 on the right if it is inside shape textbox.
 */
-.pagination-section-footer .pm-shape-container:has(
+.pagination-section-footer .sd-editor-shape-container:has(
   [data-id="auto-page-number"],
   [data-id="auto-total-pages"]
 ) {

packages/super-editor/src/assets/styles/extensions/placeholder.css

@@ -1,4 +1,4 @@
-.super-editor-placeholder::before {
+.sd-editor-placeholder::before {
   content: attr(data-placeholder);
   color: #aaa;
   pointer-events: none;

packages/super-editor/src/assets/styles/extensions/popover.css

@@ -1,4 +1,4 @@
-.popover {
+.sd-editor-popover {
   background-color: #fff;
   border-radius: 8px;
   -webkit-box-shadow: 0px 4px 12px 0px rgba(50, 50, 50, 0.15);
@@ -12,28 +12,24 @@
   z-index: 1000;
 }
 
-.popover-header {
+.sd-editor-popover .popover-header {
   font-weight: bold;
   margin-bottom: 8px;
 }
 
-.tippy-content {
-  padding: 0;
-}
-
-.tippy-box[data-theme~='popover'] {
+.tippy-box[data-theme~='sd-editor-popover'] {
   background-color: #fff;
   border-radius: 8px;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-  border: none;
+  border: none !important;
+  padding: 0 !important;
 }
 
-.tippy-box[data-theme~='popover'] .tippy-arrow {
+.tippy-box[data-theme~='sd-editor-popover'] .tippy-arrow {
   color: #fff;
   border: 1px solid #dbdbdb;
 }
 
-.tippy-box[data-theme~='popover'] {
-  border: none !important;
-  padding: none !important;
+.tippy-box[data-theme~='sd-editor-popover'] .tippy-content {
+  padding: 0;
 }

packages/super-editor/src/assets/styles/layout/global.css

@@ -1,10 +1,4 @@
-.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.input-active {
+.sd-input-active {
   border: 1px solid #1355ff !important;
 }
 
@@ -15,4 +9,4 @@
   height: 100%;
   width: 100%;
   outline: none;
-}
+}

packages/super-editor/src/components/toolbar/ButtonGroup.vue

@@ -101,7 +101,7 @@ const handleClickOutside = (e) => {
         :show="item.expand.value"
         size="medium"
         placement="bottom-start"
-        class="toolbar-button toolbar-dropdown"
+        class="toolbar-button toolbar-dropdown sd-editor-toolbar-dropdown"
         @select="(key, option) => handleSelect(item, option)"
         @clickoutside="handleClickOutside"
         :style="item.dropdownStyles.value"
@@ -121,7 +121,7 @@ const handleClickOutside = (e) => {
         </n-tooltip>
       </n-dropdown>
 
-      <n-tooltip trigger="hover" v-else-if="isButton(item)">
+      <n-tooltip trigger="hover" v-else-if="isButton(item)" class="sd-editor-toolbar-tooltip">
         <template #trigger>
           <ToolbarButton
             :toolbar-item="item"
@@ -146,26 +146,26 @@ const handleClickOutside = (e) => {
 </template>
 
 <style lang="postcss">
-.n-dropdown {
+.sd-editor-toolbar-dropdown {
   border-radius: 8px;
   min-width: 80px;
+  cursor: pointer;
 }
-.n-tooltip,
-.n-popover {
-  background-color: #333333 !important;
-  font-size: 14px;
-  border-radius: 8px !important;
-}
-.n-dropdown-option-body {
+
+.sd-editor-toolbar-dropdown .n-dropdown-option-body {
   &:hover {
     &::before,
     &::after {
       background-color: #d8dee5 !important;
     }
   }
 }
-.toolbar-dropdown {
-  cursor: pointer;
+
+.sd-editor-toolbar-tooltip,
+.sd-editor-toolbar-tooltip.n-popover {
+  background-color: #333333 !important;
+  font-size: 14px;
+  border-radius: 8px !important;
 }
 </style>
 

packages/super-editor/src/core/super-converter/exporter.js

@@ -1731,17 +1731,25 @@ function prepareCheckboxAnnotation(params) {
  */
 function prepareHtmlAnnotation(params) {
   const {
-    node: { attrs = {} },
+    node: { attrs = {}, marks = [] },
+    editorSchema,
   } = params;
 
   const parser = new window.DOMParser();
   const paragraphHtml = parser.parseFromString(attrs.rawHtml || attrs.displayLabel, 'text/html');
+  const marksFromAttrs = translateFieldAttrsToMarks(attrs);
+  const allMarks = [...marks, ...marksFromAttrs]
 
-  const state = EditorState.create({
-    doc: PMDOMParser.fromSchema(params.editorSchema).parse(paragraphHtml),
+  let state = EditorState.create({
+    doc: PMDOMParser.fromSchema(editorSchema).parse(paragraphHtml),
   });
 
+  if (allMarks.length) {
+    state = applyMarksToHtmlAnnotation(state, allMarks);
+  }
+
   const htmlAnnotationNode = state.doc.toJSON();
+  
   return {
     name: 'htmlAnnotation',
     elements: translateChildNodes({
@@ -1896,6 +1904,20 @@ function translateFieldAnnotation(params) {
               'w:val': attrs.multipleImage,
             },
           },
+          {
+            name: 'w:fieldFontFamily',
+            attributes: {
+              'xmlns:w': customXmlns,
+              'w:val': attrs.fontFamily,
+            },
+          },
+          {
+            name: 'w:fieldFontSize',
+            attributes: {
+              'xmlns:w': customXmlns,
+              'w:val': attrs.fontSize,
+            },
+          },
         ],
       },
       {
@@ -2103,3 +2125,46 @@ function resizeKeepAspectRatio(width, height, maxWidth) {
   }
   return { width, height };
 }
+
+function applyMarksToHtmlAnnotation(state, marks) {
+  const { tr, doc, schema } = state;
+  const allowedMarks = ['fontFamily', 'fontSize'];
+
+  if (
+    !marks.some((m) => allowedMarks.includes(m.type))
+  ) {
+    return state;
+  }
+
+  const fontFamily = marks.find((m) => m.type === 'fontFamily');
+  const fontSize = marks.find((m) => m.type === 'fontSize');
+
+  doc.descendants((node, pos) => {
+    if (!node.isText) return;
+
+    const found = node.marks.find((m) => m.type.name === 'textStyle');
+    const textStyleType = schema.marks.textStyle;
+
+    if (!found) {
+      tr.addMark(pos, pos + node.nodeSize, textStyleType.create({
+        ...fontFamily?.attrs,
+        ...fontSize?.attrs,
+      }));
+      return;
+    }
+
+    if (!found?.attrs.fontFamily && fontFamily) {
+      tr.addMark(pos, pos + node.nodeSize, textStyleType.create({
+        ...found?.attrs,
+        ...fontFamily.attrs,
+      }));
+    } else if (!found?.attrs.fontSize && fontSize) {
+      tr.addMark(pos, pos + node.nodeSize, textStyleType.create({
+        ...found?.attrs,
+        ...fontSize.attrs,
+      }));
+    }
+  });
+
+  return state.apply(tr);
+};