add support for <Label/> within slate

src/editor/LabelWrapper.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Popup, Label } from 'semantic-ui-react';
+import { serializeNodes } from 'volto-slate/editor/render';
+
+const LabelWrapper = (props) => {
+  const { attributes, children, element } = props;
+  const { data = {} } = element;
+  const { uid, label_type } = data;
+  return (
+    <Popup
+      position={data.pointing}
+      open={data.always_show || undefined}
+      on={!data.always_show && 'click'}
+      trigger={
+        label_type ? (
+          <Label className={label_type}>{children}</Label>
+        ) : (
+          <span id={`label_ref-${uid}`} {...attributes} className="label-node">
+            {children}
+          </span>
+        )
+      }
+      className={`ui label ${data.type}`}
+    >
+      {serializeNodes(data.label_content)}
+    </Popup>
+  );
+};
+
+export default LabelWrapper;

src/editor/render.jsx

@@ -1,52 +1,19 @@
 import React from 'react';
-import { Popup } from 'semantic-ui-react';
-import { serializeNodes } from 'volto-slate/editor/render';
+import LabelWrapper from './LabelWrapper';
 
 export const LabelElement = (props) => {
-  const { attributes, children, element, mode } = props;
+  const { element, mode } = props;
   const { data = {} } = element;
   const { uid } = data;
 
   return (
     <>
       {mode === 'view' ? (
         <span id={`ref-${uid}`} aria-describedby="slate-label">
-          <Popup
-            position={data.pointing}
-            open={data.always_show || undefined}
-            on={!data.always_show && 'click'}
-            trigger={
-              <span
-                id={`cite_ref-${uid}`}
-                {...attributes}
-                className="label-node"
-              >
-                {children}
-              </span>
-            }
-            className={`ui label ${data.type}`}
-          >
-            {serializeNodes(data.label_content)}
-          </Popup>
+          <LabelWrapper {...props} />
         </span>
       ) : (
-        <Popup
-          position={data.pointing}
-          open={data.always_show || undefined}
-          on={!data.always_show && 'click'}
-          trigger={
-            <span
-              id={`label_ref-${uid}`}
-              {...attributes}
-              className="label-node"
-            >
-              {children}
-            </span>
-          }
-          className={`ui label ${data.type}`}
-        >
-          {serializeNodes(data.label_content)}
-        </Popup>
+        <LabelWrapper {...props} />
       )}
     </>
   );

src/editor/schema.js

@@ -4,13 +4,18 @@ export const LabelEditorSchema = {
     {
       id: 'default',
       title: 'Default',
+      fields: ['label_type'],
+    },
+    {
+      id: 'tooltip',
+      title: 'Tooltip',
       fields: ['label_content', 'pointing', 'type', 'always_show'],
     },
   ],
   properties: {
     label_content: {
       title: 'Content',
-      widget: 'slate_richtext',
+      widget: 'slate',
     },
     pointing: {
       title: 'Pointing',
@@ -38,9 +43,19 @@ export const LabelEditorSchema = {
       ],
       default: ['highlight', 'highlight'],
     },
+    label_type: {
+      title: 'Type',
+      type: 'string',
+      factory: 'Choice',
+      choices: [
+        ['medium', 'medium'],
+        ['high', 'high'],
+        ['highlight', 'highlight'],
+      ],
+    },
     always_show: {
       title: 'Always show',
-      description: 'Always show the content label popup',
+      description: 'Always show the content label tooltip',
       type: 'boolean',
     },
   },

src/index.js

@@ -1,8 +1,10 @@
 import { LABEL } from './constants';
 import installLabelEditor from './editor';
+import RichTextWidgetView from 'volto-slate/widgets/RichTextWidgetView';
 
 export default function install(config) {
   config.settings.labels = [...(config.settings.labels || []), LABEL];
+  config.widgets.views.widget.slate = RichTextWidgetView;
   config = installLabelEditor(config);
 
   return config;