Add volto-slate-label components

CHANGELOG.md

@@ -1,5 +1,30 @@
-# Changelog
+### Changelog
 
-## 0.1.0
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
-- Initial release
+Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+
+#### [0.2.0](https://github.com/eea/volto-slate-label/compare/0.1.0...0.2.0)
+
+- feat(label): Update block options and labels [`ab4d672`](https://github.com/eea/volto-slate-label/commit/ab4d67267ef37f3f3144ae883eb5f609ad183107)
+- remove label class for tooltip [`90ba050`](https://github.com/eea/volto-slate-label/commit/90ba0508214ed267fb35b4950ac9cf620d7fb580)
+- fix edge case [`9468a24`](https://github.com/eea/volto-slate-label/commit/9468a241bde542c2525947c570afe988bdc63871)
+- rename popup to tooltip [`f2e636f`](https://github.com/eea/volto-slate-label/commit/f2e636f4ea491efb4eaf8c50b2215fc94e26392e)
+- render label in isolation with tooltip [`96cbc0c`](https://github.com/eea/volto-slate-label/commit/96cbc0ce2981465eb69c52964afde22f983a9bae)
+- fix formData [`7219341`](https://github.com/eea/volto-slate-label/commit/721934117eb13f315e66f97d41cfc59a5b5602e3)
+- remove tooltip content from required in schema [`86b0011`](https://github.com/eea/volto-slate-label/commit/86b00117446680d9f5298cc6220372c956d3bbb4)
+- add support for <Label/> within slate [`dfa7ac6`](https://github.com/eea/volto-slate-label/commit/dfa7ac6e22d060c562984204f9f12ab71a747cce)
+- cosmetics [`5876f29`](https://github.com/eea/volto-slate-label/commit/5876f293809bc1cea370aa4003af4f8002ae1dbb)
+- fix design in view [`90c11c2`](https://github.com/eea/volto-slate-label/commit/90c11c27315d51c34883b1aa8172f71a23cc06c7)
+- feat(always_open), change icon,use classes from design system [`bed86e8`](https://github.com/eea/volto-slate-label/commit/bed86e8dc7652a233845adcb64aff656c9aec990)
+- Release 0.2.0 [`97ee744`](https://github.com/eea/volto-slate-label/commit/97ee7440024819c0b8e943d15a81665bad4469f0)
+- remove label undefined [`0526ec4`](https://github.com/eea/volto-slate-label/commit/0526ec41491fe4930334e4e099a127ab556c4444)
+- add volto-slate to dep [`1cde22e`](https://github.com/eea/volto-slate-label/commit/1cde22e8ea10c5259e7b8cb6485205aa580c7c4d)
+- use Popup for label, remove unused code [`5fb09ad`](https://github.com/eea/volto-slate-label/commit/5fb09ad9b6c057c37d553a6b5160bd0c5afe49b9)
+- volto-slate-label:slate addon [`c84bbae`](https://github.com/eea/volto-slate-label/commit/c84bbaea930eec4646749379fa5e1832de460174)
+
+#### 0.1.0
+
+> 28 March 2022
+
+- Initial commit [`190dd4a`](https://github.com/eea/volto-slate-label/commit/190dd4ab6ef74a24cfb19af4d6eb6f76c32aca47)

Jenkinsfile

@@ -238,9 +238,4 @@ pipeline {
       }
     }
   }
-}
-     )
-      }
-    }
-  }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-slate-label",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "@eeacms/volto-slate-label: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -16,8 +16,12 @@
     "type": "git",
     "url": "git@github.com:eea/volto-slate-label.git"
   },
+  "addons": [
+    "volto-slate"
+  ],
   "dependencies": {
-    "@plone/scripts": "*"
+    "@plone/scripts": "*",
+    "volto-slate": "*"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

src/constants.js

@@ -0,0 +1 @@
+export const LABEL = 'label';

src/editor/LabelWrapper.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Popup, Label } from 'semantic-ui-react';
+import cx from 'classnames';
+import {
+  serializeNodes,
+  serializeNodesToText,
+} from 'volto-slate/editor/render';
+
+const LabelWrapper = (props) => {
+  const { attributes, children, element } = props;
+  const { data = {} } = element;
+  const { uid, label_type, label_pointing } = data;
+  const isTooltipText =
+    data.tooltip_content &&
+    serializeNodesToText(data.tooltip_content).trim().length > 0;
+
+  return isTooltipText ? (
+    <Popup
+      position={data.tooltip_pointing}
+      open={data.always_show || undefined}
+      on={!data.always_show && 'click'}
+      trigger={
+        label_type ? (
+          <Label className={cx(label_type, label_pointing, 'with-popup')}>
+            {children}
+          </Label>
+        ) : (
+          <span
+            id={`label_ref-${uid}`}
+            {...attributes}
+            className="label-node with-popup"
+          >
+            {children}
+          </span>
+        )
+      }
+      className={data.tooltip_type}
+    >
+      {serializeNodes(data.tooltip_content)}
+    </Popup>
+  ) : (
+    <Label className={cx(label_type, label_pointing)}>{children}</Label>
+  );
+};
+
+export default LabelWrapper;

src/editor/extensions.js

@@ -0,0 +1,45 @@
+import { LABEL } from '../constants';
+import { nanoid } from 'volto-slate/utils';
+import { Transforms } from 'slate';
+
+export const withLabel = (editor) => {
+  const { normalizeNode, isInline } = editor;
+
+  editor.isInline = (element) => {
+    return element.type === LABEL ? true : isInline(element);
+  };
+
+  editor.normalizeNode = (entry) => {
+    const [node, path] = entry;
+
+    if (node.type === LABEL && !node.data?.uid) {
+      Transforms.setNodes(
+        editor,
+        {
+          data: {
+            uid: nanoid(5),
+          },
+        },
+        {
+          at: path,
+        },
+      );
+    }
+    return normalizeNode(entry);
+  };
+
+  return editor;
+};
+// will replace existing uid with a new one
+// this will be usefull when copy/pase items have the same uid
+export const withBeforeInsertFragment = (editor) => {
+  const { beforeInsertFragment } = editor;
+  editor.beforeInsertFragment = (parsed) => {
+    if (parsed?.[0]?.children?.[0]?.data?.uid) {
+      parsed[0].children[0].data.uid = nanoid(5);
+    }
+    return beforeInsertFragment ? beforeInsertFragment(parsed) : parsed;
+  };
+
+  return editor;
+};

src/editor/index.js

@@ -0,0 +1,49 @@
+import commentSVG from '@plone/volto/icons/comment.svg';
+import { defineMessages } from 'react-intl'; // , defineMessages
+
+import { makeInlineElementPlugin } from 'volto-slate/components/ElementEditor';
+
+import { LabelEditorSchema } from './schema';
+import { withLabel, withBeforeInsertFragment } from './extensions';
+import { LABEL } from '../constants';
+import { LabelElement } from './render';
+
+import './styles.less';
+
+const messages = defineMessages({
+  edit: {
+    id: 'Edit label',
+    defaultMessage: 'Edit label',
+  },
+  delete: {
+    id: 'Remove label',
+    defaultMessage: 'Remove label',
+  },
+});
+
+export default function install(config) {
+  const opts = {
+    title: 'Label',
+    pluginId: LABEL,
+    elementType: LABEL,
+    element: LabelElement,
+    isInlineElement: true,
+    editSchema: LabelEditorSchema,
+    extensions: [withLabel, withBeforeInsertFragment],
+    hasValue: (formData) => !!formData,
+    toolbarButtonIcon: commentSVG,
+    messages,
+  };
+  const [installLabelEditor] = makeInlineElementPlugin(opts);
+  config = installLabelEditor(config);
+
+  const { slate } = config.settings;
+
+  slate.toolbarButtons = [...(slate.toolbarButtons || []), 'label'];
+  slate.expandedToolbarButtons = [
+    ...(slate.expandedToolbarButtons || []),
+    'label',
+  ];
+
+  return config;
+}

src/editor/render.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import LabelWrapper from './LabelWrapper';
+
+export const LabelElement = (props) => {
+  const { element, mode } = props;
+  const { data = {} } = element;
+  const { uid } = data;
+
+  return (
+    <>
+      {mode === 'view' ? (
+        <span id={`ref-${uid}`} aria-describedby="slate-label">
+          <LabelWrapper {...props} />
+        </span>
+      ) : (
+        <LabelWrapper {...props} />
+      )}
+    </>
+  );
+};

src/editor/schema.js

@@ -0,0 +1,79 @@
+export const LabelEditorSchema = {
+  title: 'Add label',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['label_type', 'label_pointing'],
+    },
+    {
+      id: 'tooltip',
+      title: 'Tooltip',
+      fields: [
+        'tooltip_content',
+        'tooltip_pointing',
+        'tooltip_type',
+        'always_show',
+      ],
+    },
+  ],
+  properties: {
+    label_type: {
+      title: 'Type',
+      type: 'string',
+      factory: 'Choice',
+      choices: [
+        ['medium', 'Medium importance'],
+        ['high', 'High importance'],
+        ['highlight', 'Highlight'],
+      ],
+    },
+    label_pointing: {
+      title: 'Pointing',
+      type: 'string',
+      factory: 'Choice',
+      choices: [
+        ['pointing', 'Up'],
+        ['right pointing', 'Right'],
+        ['left pointing', 'Left'],
+        ['pointing below', 'Down'],
+      ],
+    },
+    tooltip_content: {
+      title: 'Content',
+      widget: 'slate',
+    },
+    tooltip_pointing: {
+      title: 'Position',
+      type: 'string',
+      factory: 'Choice',
+      choices: [
+        ['top center', 'top center'],
+        ['top left', 'top left'],
+        ['top right', 'top right'],
+        ['bottom center', 'bottom center'],
+        ['bottom left', 'bottom left'],
+        ['bottom right', 'bottom right'],
+        ['right center', 'right center'],
+        ['left center', 'left center'],
+      ],
+    },
+    tooltip_type: {
+      title: 'Type',
+      type: 'string',
+      factory: 'Choice',
+      choices: [
+        ['medium', 'Medium importance'],
+        ['high', 'High importance'],
+        ['highlight', 'Highlight'],
+      ],
+      default: ['highlight', 'highlight'],
+    },
+    always_show: {
+      title: 'Always show',
+      description: 'Always show the content label tooltip',
+      type: 'boolean',
+    },
+  },
+  required: [],
+};

src/editor/styles.less

@@ -0,0 +1,39 @@
+//Custom styles
+
+// .ui.label.high {
+//   background-color: #005293;
+
+//   &::before {
+//     background-color: #005293 !important;
+//   }
+// }
+
+// .ui.label.medium {
+//   background-color: #346f83;
+
+//   &::before {
+//     background-color: #346f83 !important;
+//   }
+// }
+
+// .ui.popup.highlight {
+//   background-color: #009591;
+
+//   &::before {
+//     background-color: #009591 !important;
+//   }
+// }
+
+// .ui.popup.low {
+//   background-color: #3d5265;
+
+//   &::before {
+//     background-color: #3d5265 !important;
+//   }
+// }
+
+.label-node {
+  padding: 0px 4px;
+  background-color: #e6f3ff;
+  border-radius: 4px;
+}

src/index.js

@@ -1,5 +1,11 @@
-const applyConfig = (config) => {
-  return config;
-};
+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);
 
-export default applyConfig;
+  return config;
+}