@truedat/ie 8.5.3 → 8.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/ie",
-  "version": "8.5.3",
+  "version": "8.5.4",
   "description": "Truedat Web Ingests",
   "sideEffects": false,
   "module": "src/index.js",
@@ -51,7 +51,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.5.3",
+    "@truedat/test": "8.5.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -61,6 +61,7 @@
     "axios": "^1.15.0",
     "file-saver": "^2.0.5",
     "graphql": "^16.11.0",
+    "immutable": "^4.3.7",
     "is-hotkey": "^0.2.0",
     "is-url": "^1.2.4",
     "lodash": "^4.17.21",
@@ -82,7 +83,9 @@
     "redux-saga-routines": "^3.2.3",
     "reselect": "^5.1.1",
     "semantic-ui-react": "^3.0.0-beta.2",
+    "slate": "^0.47.9",
+    "slate-react": "^0.22.10",
     "swr": "^2.3.3"
   },
-  "gitHead": "9d67766fe0910fe519b6f1f2042b4a5dcc28fad5"
+  "gitHead": "75272567eb3ec948a5cdeb8346ef9cacac58267f"
 }

package/src/ingests/components/IngestDetails.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Segment, Header } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
-import { RichTextEditor } from "@truedat/core/components";
+import RichTextEditor from "./RichTextEditor";
 
 const DynamicFormViewer = lazy(
   () => import("@truedat/df/components/DynamicFormViewer")

package/src/ingests/components/IngestDuplicate.js

@@ -13,7 +13,8 @@ import {
 import { compose } from "redux";
 import { connect } from "react-redux";
 import { injectIntl, FormattedMessage } from "react-intl";
-import { HistoryBackButton, RichTextEditor } from "@truedat/core/components";
+import { HistoryBackButton } from "@truedat/core/components";
+import RichTextEditor from "./RichTextEditor";
 import { selectTemplate, selectDomain } from "@truedat/df/routines";
 import { applyTemplate } from "@truedat/df/utils";
 import { ingestAction } from "../routines";

package/src/ingests/components/IngestEdit.js

@@ -13,7 +13,8 @@ import {
 import { compose } from "redux";
 import { connect } from "react-redux";
 import { injectIntl, FormattedMessage } from "react-intl";
-import { HistoryBackButton, RichTextEditor } from "@truedat/core/components";
+import { HistoryBackButton } from "@truedat/core/components";
+import RichTextEditor from "./RichTextEditor";
 import {
   selectTemplate,
   selectDomain,

package/src/ingests/components/IngestForm.js

@@ -13,11 +13,8 @@ import {
 import { compose } from "redux";
 import { connect } from "react-redux";
 import { injectIntl, FormattedMessage } from "react-intl";
-import {
-  DomainSelector,
-  HistoryBackButton,
-  RichTextEditor,
-} from "@truedat/core/components";
+import { DomainSelector, HistoryBackButton } from "@truedat/core/components";
+import RichTextEditor from "./RichTextEditor";
 import { ingestAction } from "../routines";
 
 const SelectableDynamicForm = lazy(

package/src/ingests/components/RichTextEditor.js

@@ -0,0 +1,365 @@
+import _ from "lodash/fp";
+import { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { isKeyHotkey } from "is-hotkey";
+import isUrl from "is-url";
+import { Editor, getEventTransfer } from "slate-react";
+import { Value } from "slate";
+import { Menu, Icon } from "semantic-ui-react";
+import { validUrl } from "@truedat/core/services/validation";
+import SafeLink from "@truedat/core/components/SafeLink";
+
+const DEFAULT_NODE = "paragraph";
+
+function wrapLink(change, value) {
+  const href = validUrl(value);
+  if (href) {
+    change.wrapInline({
+      type: "link",
+      data: { href },
+    });
+
+    change.moveToEnd();
+  }
+}
+
+function unwrapLink(change) {
+  change.unwrapInline("link");
+}
+
+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();
+  }
+}
+
+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();
+  }
+}
+
+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>
+      );
+    }
+
+    default:
+      return next();
+  }
+}
+
+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();
+  }
+}
+
+const EMPTY_VALUE = {
+  document: {
+    nodes: [
+      {
+        object: "block",
+        type: "paragraph",
+        nodes: [],
+      },
+    ],
+  },
+};
+
+export const RichTextEditor = ({
+  readOnly,
+  value: propValue,
+  label,
+  required,
+  onChange,
+  name,
+}) => {
+  const [jsonValue, setJsonValue] = useState(
+    _.isEmpty(propValue) ? EMPTY_VALUE : propValue
+  );
+  const [value, setValue] = useState(Value.fromJSON(jsonValue));
+  const [editor, setEditor] = useState();
+
+  useEffect(() => {
+    if (
+      (!_.isEmpty(propValue) && !_.equals(propValue)(jsonValue)) ||
+      (readOnly && !_.equals(value)(Value.fromJSON(propValue)))
+    ) {
+      setValue(Value.fromJSON(propValue));
+    }
+  }, [propValue]);
+
+  const renderMarkButton = (type, icon) => {
+    const isActive = value?.activeMarks.some((mark) => mark.type == type);
+
+    return (
+      <Menu.Item
+        icon
+        active={isActive}
+        onMouseDown={(e) => {
+          e.preventDefault();
+          editor?.toggleMark(type);
+        }}
+        onClick={() => {}}
+      >
+        <Icon name={icon} />
+      </Menu.Item>
+    );
+  };
+
+  const hasBlock = (type) => value?.blocks.some((node) => node.type == type);
+
+  const onClickBlock = (type) => {
+    const { value } = editor || {};
+    const { document } = value || {};
+
+    if (type != "bulleted-list" && type != "numbered-list") {
+      const isActive = hasBlock(type);
+      const isList = hasBlock("list-item");
+
+      if (isList) {
+        editor
+          .setBlocks(isActive ? DEFAULT_NODE : type)
+          .unwrapBlock("bulleted-list")
+          .unwrapBlock("numbered-list");
+      } else {
+        editor.setBlocks(isActive ? DEFAULT_NODE : type);
+      }
+    } else {
+      const isList = hasBlock("list-item");
+      const isType = value?.blocks.some((block) => {
+        return !!document?.getClosest(
+          block.key,
+          (parent) => parent.type == type
+        );
+      });
+
+      if (isList && isType) {
+        editor
+          .setBlocks(DEFAULT_NODE)
+          .unwrapBlock("bulleted-list")
+          .unwrapBlock("numbered-list");
+      } else if (isList) {
+        editor
+          .unwrapBlock(
+            type == "bulleted-list" ? "numbered-list" : "bulleted-list"
+          )
+          .wrapBlock(type);
+      } else {
+        editor.setBlocks("list-item").wrapBlock(type);
+      }
+    }
+  };
+
+  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);
+
+    return (
+      <Menu.Item
+        icon
+        active={isActive}
+        onMouseDown={(e) => {
+          e.preventDefault();
+          onClickBlock(type);
+        }}
+        onClick={() => {}}
+      >
+        <Icon name={icon} />
+      </Menu.Item>
+    );
+  };
+
+  const hasLinks = () => value?.inlines.some((inline) => inline.type == "link");
+
+  const onClickLink = () => {
+    const { value } = editor || {};
+
+    if (hasLinks()) {
+      editor.command(unwrapLink);
+    } else if (value?.selection.isExpanded) {
+      const href = window.prompt("Introduzca la URL del Link:");
+      editor.command(wrapLink, href);
+    } else {
+      const href = window.prompt("Introduzca la URL del Link:");
+      const text = window.prompt("Introduzca el Texto del Link:");
+      editor
+        .insertText(text)
+        .moveFocusForward(0 - text.length)
+        .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,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  readOnly: PropTypes.bool,
+  required: PropTypes.bool,
+  value: PropTypes.object,
+};
+
+export default RichTextEditor;

package/src/ingests/selectors/getParsedEvents.js

@@ -29,21 +29,21 @@ const getIngestFieldChanges = (
   msg_key,
   fields,
   templateFields,
-  fieldsWithoutValue
+  fieldsWithoutValue,
 ) =>
   _.flow(
     _.toPairs,
     _.map(([k, v]) => ({
       msg_key: fromValueType(msg_key, k, v, fieldsWithoutValue),
       msg_params: [getFieldLabel(k, templateFields), toStr(v)],
-    }))
+    })),
   )(fields);
 
 const getFieldLabel = (field, fields) =>
   _.flow(
     _.find((f) => _.prop("name")(f) == field),
     _.defaultTo({}),
-    _.prop("label")
+    _.prop("label"),
   )(fields) || field;
 
 const fromValueType = (msg_key, field, value, fieldsWithoutValue) =>
@@ -90,22 +90,22 @@ const getUpdateIngestDraftEvent = (e, templateFields, fieldsWithoutValue) => {
           "changed_field",
           changed,
           templateFields,
-          fieldsWithoutValue
+          fieldsWithoutValue,
         ),
         getIngestFieldChanges(
           "added_field",
           added,
           templateFields,
-          fieldsWithoutValue
+          fieldsWithoutValue,
         ),
         getIngestFieldChanges(
           "removed_field",
           removed,
           templateFields,
-          fieldsWithoutValue
+          fieldsWithoutValue,
         ),
       ]),
-      _.flatten
+      _.flatten,
     )([]);
   }
 
@@ -127,20 +127,14 @@ const getParsedEvents = createSelector(
     const templateFields = _.flow(
       _.prop("content"),
       _.map(_.prop("fields")),
-      _.flatten
+      _.flatten,
     )(template);
 
     const fieldsWithoutValue = _.flow(
       _.filter((f) =>
-        _.includes(_.prop("type")(f))([
-          "enriched_text",
-          "url",
-          "table",
-          "system",
-          "image",
-        ])
+        _.includes(_.prop("type")(f))(["url", "table", "system", "image"]),
       ),
-      _.map(_.prop("name"))
+      _.map(_.prop("name")),
     )(templateFields);
     return _.map((e) => {
       const { event } = e;
@@ -161,7 +155,7 @@ const getParsedEvents = createSelector(
         return getEmptyPayloadEvent(e);
       }
     })(events);
-  }
+  },
 );
 
 export { getParsedEvents };