@truedat/core 6.0.1 → 6.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "6.0.1",
+  "version": "6.0.3",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -35,7 +35,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "6.0.1",
+    "@truedat/test": "6.0.3",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -117,5 +117,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "2ce73d263401e0a7959f9111ba3370b6810b5420"
+  "gitHead": "c88ddc501214b8c4e2732654ca0052ebbcc802c9"
 }

package/src/components/CatalogMenu.js

@@ -36,7 +36,10 @@ const structureNoteItems = [
 const catalogViewConfigItems = (formatMessage) =>
   _.flow(
     _.map(({ fieldType, fieldName }) => ({
-      name: formatMessage({ id: `${fieldType}.${fieldName}` }),
+      name: formatMessage({
+        id: `${fieldType}.${fieldName}`,
+        defaultMessage: `${fieldType}.${fieldName}`,
+      }),
       routes: [
         linkTo.BUCKETS_VIEW({ propertyPath: `${fieldType}.${fieldName}` }),
       ],

package/src/components/RichTextEditor.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { isKeyHotkey } from "is-hotkey";
 import isUrl from "is-url";
@@ -12,10 +12,6 @@ import SafeLink from "./SafeLink";
 
 const DEFAULT_NODE = "paragraph";
 
-const isBoldHotkey = isKeyHotkey("mod+b");
-const isItalicHotkey = isKeyHotkey("mod+i");
-const isUnderlinedHotkey = isKeyHotkey("mod+u");
-
 function wrapLink(change, value) {
   const href = validUrl(value);
   if (href) {
@@ -32,294 +28,153 @@ function unwrapLink(change) {
   change.unwrapInline("link");
 }
 
-export class RichTextEditor extends React.Component {
-  constructor(props) {
-    super(props);
-    const { value } = this.props;
-    const json = _.isEmpty(value)
-      ? {
-          document: {
-            nodes: [
-              {
-                object: "block",
-                type: "paragraph",
-                nodes: [],
-              },
-            ],
-          },
-        }
-      : value;
-
-    this.state = { value: Value.fromJSON(json) };
+function renderBlock(props, _editor, next) {
+  const { attributes, children, node } = props;
+
+  switch (node.type) {
+    // case 'block-quote':
+    //   return <blockquote {...attributes}>{children}</blockquote>
+    case "bulleted-list":
+      return <ul {...attributes}>{children}</ul>;
+    case "heading-one":
+      return (
+        <h1 style={{ fontSize: "18px" }} {...attributes}>
+          {children}
+        </h1>
+      );
+    case "heading-two":
+      return (
+        <h2 style={{ fontSize: "15px" }} {...attributes}>
+          {children}
+        </h2>
+      );
+    case "list-item":
+      return <li {...attributes}>{children}</li>;
+    case "numbered-list":
+      return <ol {...attributes}> {children}</ol>;
+    case "link":
+      return (
+        <SafeLink href={node.data?.get("href")} {...attributes}>
+          {children}
+        </SafeLink>
+      );
+    default:
+      return next();
   }
+}
 
-  hasMark = (type) => {
-    const { value } = this.state;
-    return value.activeMarks.some((mark) => mark.type == type);
-  };
-
-  hasBlock = (type) => {
-    const { value } = this.state;
-    return value.blocks.some((node) => node.type == type);
-  };
-
-  ref = (editor) => {
-    this.editor = editor;
-  };
-
-  renderLabel() {
-    const { label, required } = this.props;
-    if (!label) return null;
-    const classname = required ? "required field" : "field";
-    return (
-      <div className={classname}>
-        <label>{label}</label>
-      </div>
-    );
+function renderMark(props, _editor, next) {
+  const { children, mark, attributes } = props;
+
+  switch (mark.type) {
+    case "bold":
+      return <strong {...attributes}>{children}</strong>;
+    // case 'code':
+    //   return <code {...attributes}>{children}</code>
+    case "italic":
+      return <em {...attributes}>{children}</em>;
+    case "underlined":
+      return <u {...attributes}>{children}</u>;
+    default:
+      return next();
   }
+}
 
-  renderEditor() {
-    return (
-      <div>
-        {this.renderLabel()}
-        <div
-          style={{
-            border: "1px solid rgba(34, 36, 38, 0.15)",
-            borderRadius: "0.28571429rem",
-          }}
-        >
-          <Menu>
-            {this.renderMarkButton("bold", "bold")}
-            {this.renderMarkButton("italic", "italic")}
-            {this.renderMarkButton("underlined", "underline")}
-            {/* {this.renderMarkButton('code', 'file code')} */}
-            {this.renderBlockButton("heading-one", "header")}
-            {this.renderBlockButton("heading-two", "h")}
-            {/* {this.renderBlockButton('block-quote', 'quote right')} */}
-            {this.renderBlockButton("numbered-list", "list ol")}
-            {this.renderBlockButton("bulleted-list", "list ul")}
-            {this.renderLinkButton("link", "linkify")}
-          </Menu>
-          <div style={{ padding: "10px" }}>
-            <Editor
-              style={{ WebkitUserModify: "read-write !important" }}
-              spellCheck
-              autoFocus
-              value={this.state.value}
-              onChange={this.onChange}
-              onPaste={this.onPaste}
-              onKeyDown={this.onKeyDown}
-              renderBlock={this.renderBlock}
-              renderMark={this.renderMark}
-              renderInline={this.renderInline}
-              ref={this.ref}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
+function renderInline(props, _editor, next) {
+  const { attributes, children, node } = props;
+
+  switch (node.type) {
+    case "link": {
+      const props = _.omit(["ref"])(attributes);
+      return (
+        <SafeLink href={node.data?.get("href")} {...props}>
+          {children}
+        </SafeLink>
+      );
+    }
 
-  renderReadOnly() {
-    return (
-      <div>
-        <Editor
-          readOnly
-          value={this.state.value}
-          renderBlock={this.renderBlock}
-          renderMark={this.renderMark}
-          renderInline={this.renderInline}
-        />
-      </div>
-    );
+    default:
+      return next();
   }
+}
 
-  render() {
-    const { readOnly } = this.props;
-    if (readOnly) {
-      return this.renderReadOnly();
-    } else {
-      return this.renderEditor();
-    }
+function onKeyDown(event, editor, next) {
+  const isBoldHotkey = isKeyHotkey("mod+b");
+  const isItalicHotkey = isKeyHotkey("mod+i");
+  const isUnderlinedHotkey = isKeyHotkey("mod+u");
+  const mark = isBoldHotkey(event)
+    ? "bold"
+    : isItalicHotkey(event)
+    ? "italic"
+    : isUnderlinedHotkey(event)
+    ? "underlined"
+    : undefined;
+  if (!_.isNil(mark)) {
+    event.preventDefault();
+    editor.toggleMark(mark);
+    return true;
+  } else {
+    next();
   }
+}
 
-  renderMarkButton = (type, icon) => {
-    const isActive = this.hasMark(type);
-
-    return (
-      <Menu.Item
-        icon
-        disabled={!isActive}
-        onMouseDown={(event) => this.onClickMark(event, type)}
-      >
-        <Icon name={icon} />
-      </Menu.Item>
-    );
-  };
-
-  renderBlockButton = (type, icon) => {
-    const {
-      value: { document, blocks },
-    } = this.state;
-    const parent =
-      blocks.size != 0 ? document.getParent(blocks.first().key) : null;
-    const isActive = _.includes(type)(["numbered-list", "bulleted-list"])
-      ? this.hasBlock("list-item") && parent && parent.type === type
-      : this.hasBlock(type);
+const EMPTY_VALUE = {
+  document: {
+    nodes: [
+      {
+        object: "block",
+        type: "paragraph",
+        nodes: [],
+      },
+    ],
+  },
+};
 
-    return (
-      <Menu.Item
-        icon
-        disabled={!isActive}
-        onMouseDown={(event) => this.onClickBlock(event, type)}
-      >
-        <Icon name={icon} />
-      </Menu.Item>
-    );
-  };
+export const RichTextEditor = ({
+  readOnly,
+  value: propValue,
+  label,
+  required,
+  onChange,
+  name,
+}) => {
+  const [jsonValue, setJsonValue] = useState(propValue || EMPTY_VALUE);
+  const [value, setValue] = useState(Value.fromJSON(jsonValue));
+  const [editor, setEditor] = useState();
+
+  useEffect(() => {
+    if (!_.equals(propValue)(jsonValue)) {
+      setValue(Value.fromJSON(propValue));
+    }
+  }, [propValue]);
 
-  renderLinkButton = (type, icon) => {
-    const isActive = this.hasLinks();
+  const renderMarkButton = (type, icon) => {
+    const isActive = value?.activeMarks.some((mark) => mark.type == type);
 
     return (
       <Menu.Item
         icon
-        disabled={!isActive}
-        onMouseDown={(event) => this.onClickLink(event, type)}
+        active={isActive}
+        onMouseDown={(e) => {
+          e.preventDefault();
+          editor?.toggleMark(type);
+        }}
+        onClick={() => {}}
       >
         <Icon name={icon} />
       </Menu.Item>
     );
   };
 
-  renderBlock = (props, editor, next) => {
-    const { attributes, children, node } = props;
-
-    switch (node.type) {
-      // case 'block-quote':
-      //   return <blockquote {...attributes}>{children}</blockquote>
-      case "bulleted-list":
-        return <ul {...attributes}>{children}</ul>;
-      case "heading-one":
-        return (
-          <h1 style={{ fontSize: "18px" }} {...attributes}>
-            {children}
-          </h1>
-        );
-      case "heading-two":
-        return (
-          <h2 style={{ fontSize: "15px" }} {...attributes}>
-            {children}
-          </h2>
-        );
-      case "list-item":
-        return <li {...attributes}>{children}</li>;
-      case "numbered-list":
-        return <ol {...attributes}> {children}</ol>;
-      case "link":
-        return (
-          <SafeLink href={node.data?.get("href")} {...attributes}>
-            {children}
-          </SafeLink>
-        );
-      default:
-        return next();
-    }
-  };
-
-  renderMark = (props, editor, next) => {
-    const { children, mark, attributes } = props;
-
-    switch (mark.type) {
-      case "bold":
-        return <strong {...attributes}>{children}</strong>;
-      // case 'code':
-      //   return <code {...attributes}>{children}</code>
-      case "italic":
-        return <em {...attributes}>{children}</em>;
-      case "underlined":
-        return <u {...attributes}>{children}</u>;
-      default:
-        return next();
-    }
-  };
-
-  renderInline = (props, editor, next) => {
-    const { attributes, children, node } = props;
-
-    switch (node.type) {
-      case "link": {
-        const props = _.omit(["ref"])(attributes);
-        return (
-          <SafeLink href={node.data?.get("href")} {...props}>
-            {children}
-          </SafeLink>
-        );
-      }
-
-      default:
-        return next();
-    }
-  };
+  const hasBlock = (type) => value?.blocks.some((node) => node.type == type);
 
-  onChange = ({ value }) => {
-    this.setState({ value });
-    const { onChange, name } = this.props;
-    if (onChange) {
-      const { text } = value.document;
-      const json = text ? value.toJSON() : {};
-      const event = undefined; // the onChange handler expects an event as the first argument
-      onChange(event, { name, value: json });
-    }
-  };
-
-  onKeyDown = (event, editor, next) => {
-    const mark = isBoldHotkey(event)
-      ? "bold"
-      : isItalicHotkey(event)
-      ? "italic"
-      : isUnderlinedHotkey(event)
-      ? "underlined"
-      : undefined;
-    if (!_.isNil(mark)) {
-      event.preventDefault();
-      editor.toggleMark(mark);
-      return true;
-    } else {
-      next();
-    }
-  };
-
-  onPaste = (event, editor, next) => {
-    if (editor.value.selection.isCollapsed) return next();
-
-    const transfer = getEventTransfer(event);
-    const { type, text } = transfer;
-    if (type !== "text" && type !== "html") return next();
-    if (!isUrl(text)) return next();
-
-    if (this.hasLinks()) {
-      editor.command(unwrapLink);
-    }
-
-    editor.command(wrapLink, text);
-  };
-
-  onClickMark = (event, type) => {
-    event.preventDefault();
-    this.editor.toggleMark(type);
-  };
-
-  onClickBlock = (event, type) => {
-    event.preventDefault();
-
-    const { editor } = this;
-    const { value } = editor;
-    const { document } = value;
+  const onClickBlock = (type) => {
+    const { value } = editor || {};
+    const { document } = value || {};
 
     if (type != "bulleted-list" && type != "numbered-list") {
-      const isActive = this.hasBlock(type);
-      const isList = this.hasBlock("list-item");
+      const isActive = hasBlock(type);
+      const isList = hasBlock("list-item");
 
       if (isList) {
         editor
@@ -330,9 +185,9 @@ export class RichTextEditor extends React.Component {
         editor.setBlocks(isActive ? DEFAULT_NODE : type);
       }
     } else {
-      const isList = this.hasBlock("list-item");
-      const isType = value.blocks.some((block) => {
-        return !!document.getClosest(
+      const isList = hasBlock("list-item");
+      const isType = value?.blocks.some((block) => {
+        return !!document?.getClosest(
           block.key,
           (parent) => parent.type == type
         );
@@ -355,22 +210,37 @@ export class RichTextEditor extends React.Component {
     }
   };
 
-  hasLinks = () => {
-    const { value } = this.state;
-    return value.inlines.some((inline) => inline.type == "link");
-  };
+  const renderBlockButton = (type, icon) => {
+    const { document, blocks } = value || {};
+    const parent =
+      blocks?.size != 0 ? document?.getParent(blocks?.first().key) : null;
+    const isActive = _.includes(type)(["numbered-list", "bulleted-list"])
+      ? hasBlock("list-item") && parent && parent?.type === type
+      : hasBlock(type);
 
-  onClickLink = (event) => {
-    event.preventDefault();
+    return (
+      <Menu.Item
+        icon
+        active={isActive}
+        onMouseDown={(e) => {
+          e.preventDefault();
+          onClickBlock(type);
+        }}
+        onClick={() => {}}
+      >
+        <Icon name={icon} />
+      </Menu.Item>
+    );
+  };
 
-    const { editor } = this;
-    const { value } = editor;
+  const hasLinks = () => value?.inlines.some((inline) => inline.type == "link");
 
-    const hasLinks = this.hasLinks();
+  const onClickLink = () => {
+    const { value } = editor || {};
 
-    if (hasLinks) {
+    if (hasLinks()) {
       editor.command(unwrapLink);
-    } else if (value.selection.isExpanded) {
+    } else if (value?.selection.isExpanded) {
       const href = window.prompt("Introduzca la URL del Link:");
       editor.command(wrapLink, href);
     } else {
@@ -382,7 +252,102 @@ export class RichTextEditor extends React.Component {
         .command(wrapLink, href);
     }
   };
-}
+
+  const renderLinkButton = (icon) => {
+    const isActive = hasLinks();
+
+    return (
+      <Menu.Item
+        icon
+        active={isActive}
+        onMouseDown={(e) => {
+          e.preventDefault();
+          onClickLink();
+        }}
+        onClick={() => {}}
+      >
+        <Icon name={icon} />
+      </Menu.Item>
+    );
+  };
+
+  const handleChange = ({ value }) => {
+    const { text } = value?.document || {};
+    const json = text ? value?.toJSON() : {};
+    setJsonValue(json);
+    setValue(value);
+    if (onChange) {
+      onChange(undefined, { name, value: json });
+    }
+  };
+
+  const onPaste = (event, editor, next) => {
+    if (editor?.value?.selection?.isCollapsed) return next();
+
+    const transfer = getEventTransfer(event);
+    const { type, text } = transfer;
+    if (type !== "text" && type !== "html") return next();
+    if (!isUrl(text)) return next();
+
+    if (hasLinks()) {
+      editor.command(unwrapLink);
+    }
+
+    editor.command(wrapLink, text);
+  };
+
+  return readOnly ? (
+    <Editor
+      readOnly
+      value={value}
+      renderBlock={renderBlock}
+      renderMark={renderMark}
+      renderInline={renderInline}
+    />
+  ) : (
+    <div>
+      {label ? (
+        <div className={required ? "required field" : "field"}>
+          <label>{label}</label>
+        </div>
+      ) : null}
+      <div
+        style={{
+          border: "1px solid rgba(34, 36, 38, 0.15)",
+          borderRadius: "0.28571429rem",
+        }}
+      >
+        <Menu>
+          {renderMarkButton("bold", "bold")}
+          {renderMarkButton("italic", "italic")}
+          {renderMarkButton("underlined", "underline")}
+          {/* {renderMarkButton('code', 'file code')} */}
+          {renderBlockButton("heading-one", "header")}
+          {renderBlockButton("heading-two", "h")}
+          {/* {renderBlockButton('block-quote', 'quote right')} */}
+          {renderBlockButton("numbered-list", "list ol")}
+          {renderBlockButton("bulleted-list", "list ul")}
+          {renderLinkButton("linkify")}
+        </Menu>
+        <div style={{ padding: "10px" }}>
+          <Editor
+            style={{ WebkitUserModify: "read-write !important" }}
+            spellCheck
+            autoFocus
+            value={value}
+            onChange={handleChange}
+            onPaste={onPaste}
+            onKeyDown={onKeyDown}
+            renderBlock={renderBlock}
+            renderMark={renderMark}
+            renderInline={renderInline}
+            ref={setEditor}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
 
 RichTextEditor.propTypes = {
   label: PropTypes.string,

package/src/components/TemplateSelector.js

@@ -27,6 +27,7 @@ export const TemplateSelector = ({
   templates,
   placeholder,
   hideLabel = false,
+  disabled,
 }) => {
   const { formatMessage } = useIntl();
   const options = makeOptions(formatMessage)(templates);
@@ -50,6 +51,7 @@ export const TemplateSelector = ({
         </label>
       )}
       <Form.Dropdown
+        disabled={disabled}
         clearable={clearable}
         loading={loading}
         name={name}
@@ -80,6 +82,7 @@ TemplateSelector.propTypes = {
   templates: PropTypes.array,
   placeholder: PropTypes.string,
   hideLabel: PropTypes.bool,
+  disabled: PropTypes.bool,
 };
 
 const emptyTemplates = [];

package/src/services/format.js

@@ -1 +1,23 @@
 export const formatNumber = (value) => value?.toLocaleString();
+
+export const toEnrichedTextFormat = (value) => ({
+  object: "value",
+  document: {
+    object: "document",
+    data: {},
+    nodes: [
+      {
+        object: "block",
+        type: "paragraph",
+        data: {},
+        nodes: [
+          {
+            object: "text",
+            text: value,
+            marks: [],
+          },
+        ],
+      },
+    ],
+  },
+});