@modusoperandi/licit 1.4.2 → 1.4.6

package/ui/LinkURLEditor.js.flow

@@ -1,227 +1,227 @@
-// @flow
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-
-import sanitizeURL from '../sanitizeURL.js';
-import {
-  CustomButton,
-  preventEventDefault,
-} from '@modusoperandi/licit-ui-commands';
-import { ENTER } from './KeyCodes.js';
-import { INNER_LINK } from '../Types.js';
-import { Tooltip as ReactTooltip } from 'react-tooltip';
-
-const BAD_CHARACTER_PATTER = /\s/;
-
-class LinkURLEditor extends React.PureComponent<any, any> {
-  static propTypes = {
-    href: PropTypes.string,
-    close: PropTypes.func.isRequired,
-    selectedTab: this.state?.selectedTab,
-  };
-
-  state = {
-    url: this.props.href_,
-    TOCselectedNode_: this.props.TOCselectedNode_,
-    selectionId: this.props.selectionId_,
-  };
-
-  componentDidMount() {
-    const { selectionId } = this.state;
-    const defaultTab = selectionId ? 'innerlink' : 'webpage';
-
-    const selectedTab = this.props.selectedTab || defaultTab;
-    this.openForm(selectedTab);
-  }
-
-  openForm = (formName) => {
-    let i;
-    const tabcontent = document.getElementsByClassName('tabcontent');
-    for (i = 0; i < tabcontent.length; i++) {
-      tabcontent[i].style.display = 'none';
-    }
-
-    const tablinks = document.getElementsByClassName('tablinks');
-    for (i = 0; i < tablinks.length; i++) {
-      tablinks[i].classList.remove('active');
-    }
-
-    const selectedTab = document.getElementById(formName);
-    if (selectedTab) {
-      selectedTab.style.display = 'block';
-    }
-
-    const clickedButton = document.querySelector(
-      `.tablinks[data-form="${formName}"]`
-    );
-    if (clickedButton) {
-      clickedButton.classList.add('active');
-    }
-  };
-
-  render(): React.Element<any> {
-    const { url, TOCselectedNode_, selectionId } = this.state;
-
-    const isTOCValid = () => {
-      if (!TOCselectedNode_ || TOCselectedNode_.length === 0) {
-        return false;
-      }
-
-      return TOCselectedNode_.some(
-        (item) => item?.content[0]?.text?.trim() !== ''
-      );
-    };
-    const isValid = isTOCValid();
-    const error = url ? BAD_CHARACTER_PATTER.test(url) : false;
-
-    let label = 'Apply';
-    let disabled;
-    if (this.props.href) {
-      label = url ? 'Apply' : 'Remove';
-      disabled = error;
-    } else {
-      disabled = error || !url;
-    }
-
-    return (
-      <div className="czi-image-url-editor">
-        <div className="czi-form" style={{ padding: '10px', display: 'flex' }}>
-          <div className="tab">
-            <button
-              className="tablinks"
-              data-form="webpage"
-              onClick={() => this.openForm('webpage')}
-            >
-              Existing Web Page
-            </button>
-            <button
-              className="tablinks"
-              data-form="innerlink"
-              onClick={() => this.openForm('innerlink')}
-            >
-              Place in this Document
-            </button>
-          </div>
-
-          <div className="tabcontent" id="webpage">
-            <form onSubmit={preventEventDefault}>
-              <fieldset>
-                <label>Add a Link : </label>
-                <input
-                  autoFocus={true}
-                  onChange={this._onURLChange}
-                  onKeyDown={this._onKeyDown}
-                  placeholder="Paste a URL"
-                  spellCheck={false}
-                  type="text"
-                  value={selectionId ? null : url}
-                />
-              </fieldset>
-              <div className="czi-form-buttons">
-                <CustomButton label="Cancel" onClick={this._cancel} />
-                <CustomButton
-                  active={true}
-                  disabled={disabled}
-                  label={label}
-                  onClick={() => {
-                    this._apply();
-                  }}
-                />
-              </div>
-            </form>
-          </div>
-          {!isValid ? (
-            <div className="tabcontent" id="innerlink">
-              <p>No TOC/TOT/TOF styles</p>
-              <div className="czi-form-buttons">
-                <CustomButton label="Cancel" onClick={this._cancel} />
-              </div>
-            </div>
-          ) : (
-            <div className="tabcontent" id="innerlink">
-              <form action="#">
-                <label>Select the Inner Link</label>
-                <br></br>
-                <select
-                  defaultValue={
-                    TOCselectedNode_.some(
-                      (res) => res?.content[0]?.text === url
-                    )
-                      ? url
-                      : null
-                  }
-                  id="toc"
-                  name="toccontents"
-                  size="3"
-                >
-                  {TOCselectedNode_?.filter(
-                    (res) => res?.content[0]?.text?.trim() !== ''
-                  ).map((res, index) => (
-                    <option
-                      data-tooltip-content={res?.content[0]?.text}
-                      data-tooltip-id="select-toc-tooltip"
-                      key={index}
-                      onClick={() => {
-                        this.handleOptionChange(
-                          res?.content[0]?.text,
-                          res?.attrs.selectionId
-                        );
-                      }}
-                      value={res?.content[0]?.text}
-                    >
-                      {res?.content[0]?.text}
-                    </option>
-                  ))}
-                </select>
-                <ReactTooltip
-                  effect="solid"
-                  id="select-toc-tooltip"
-                  place="bottom"
-                />
-                <br></br>
-                <div className="czi-form-buttons">
-                  <CustomButton label="Cancel" onClick={this._cancel} />
-                </div>
-              </form>
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
-
-  handleOptionChange = (textContent_, selectionId) => {
-    const texthash = '';
-    const nodeconcat_UUID = texthash.concat(selectionId);
-    const textContent = nodeconcat_UUID.concat(INNER_LINK, textContent_);
-    this.props.close(textContent);
-  };
-
-  _onKeyDown = (e: any) => {
-    if (e.keyCode === ENTER) {
-      e.preventDefault();
-      this._apply();
-    }
-  };
-
-  _onURLChange = (e: SyntheticInputEvent<>) => {
-    const url = e.target.value;
-    this.setState({
-      url,
-    });
-  };
-
-  _cancel = (): void => {
-    this.props.close();
-  };
-
-  _apply = (): void => {
-    const { url } = this.state;
-    if (url && !BAD_CHARACTER_PATTER.test(url)) {
-      this.props.close(sanitizeURL(url));
-    }
-  };
-}
-
-export default LinkURLEditor;
+// @flow
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import sanitizeURL from '../sanitizeURL.js';
+import {
+  CustomButton,
+  preventEventDefault,
+} from '@modusoperandi/licit-ui-commands';
+import { ENTER } from './KeyCodes.js';
+import { INNER_LINK } from '../Types.js';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
+
+const BAD_CHARACTER_PATTER = /\s/;
+
+class LinkURLEditor extends React.PureComponent<any, any> {
+  static propTypes = {
+    href: PropTypes.string,
+    close: PropTypes.func.isRequired,
+    selectedTab: this.state?.selectedTab,
+  };
+
+  state = {
+    url: this.props.href_,
+    TOCselectedNode_: this.props.TOCselectedNode_,
+    selectionId: this.props.selectionId_,
+  };
+
+  componentDidMount() {
+    const { selectionId } = this.state;
+    const defaultTab = selectionId ? 'innerlink' : 'webpage';
+
+    const selectedTab = this.props.selectedTab || defaultTab;
+    this.openForm(selectedTab);
+  }
+
+  openForm = (formName) => {
+    let i;
+    const tabcontent = document.getElementsByClassName('tabcontent');
+    for (i = 0; i < tabcontent.length; i++) {
+      tabcontent[i].style.display = 'none';
+    }
+
+    const tablinks = document.getElementsByClassName('tablinks');
+    for (i = 0; i < tablinks.length; i++) {
+      tablinks[i].classList.remove('active');
+    }
+
+    const selectedTab = document.getElementById(formName);
+    if (selectedTab) {
+      selectedTab.style.display = 'block';
+    }
+
+    const clickedButton = document.querySelector(
+      `.tablinks[data-form="${formName}"]`
+    );
+    if (clickedButton) {
+      clickedButton.classList.add('active');
+    }
+  };
+
+  render(): React.Element<any> {
+    const { url, TOCselectedNode_, selectionId } = this.state;
+
+    const isTOCValid = () => {
+      if (!TOCselectedNode_ || TOCselectedNode_.length === 0) {
+        return false;
+      }
+
+      return TOCselectedNode_.some(
+        (item) => item?.content[0]?.text?.trim() !== ''
+      );
+    };
+    const isValid = isTOCValid();
+    const error = url ? BAD_CHARACTER_PATTER.test(url) : false;
+
+    let label = 'Apply';
+    let disabled;
+    if (this.props.href) {
+      label = url ? 'Apply' : 'Remove';
+      disabled = error;
+    } else {
+      disabled = error || !url;
+    }
+
+    return (
+      <div className="czi-image-url-editor">
+        <div className="czi-form" style={{ padding: '10px', display: 'flex' }}>
+          <div className="tab">
+            <button
+              className="tablinks"
+              data-form="webpage"
+              onClick={() => this.openForm('webpage')}
+            >
+              Existing Web Page
+            </button>
+            <button
+              className="tablinks"
+              data-form="innerlink"
+              onClick={() => this.openForm('innerlink')}
+            >
+              Place in this Document
+            </button>
+          </div>
+
+          <div className="tabcontent" id="webpage">
+            <form onSubmit={preventEventDefault}>
+              <fieldset>
+                <label>Add a Link : </label>
+                <input
+                  autoFocus={true}
+                  onChange={this._onURLChange}
+                  onKeyDown={this._onKeyDown}
+                  placeholder="Paste a URL"
+                  spellCheck={false}
+                  type="text"
+                  value={selectionId ? null : url}
+                />
+              </fieldset>
+              <div className="czi-form-buttons">
+                <CustomButton label="Cancel" onClick={this._cancel} />
+                <CustomButton
+                  active={true}
+                  disabled={disabled}
+                  label={label}
+                  onClick={() => {
+                    this._apply();
+                  }}
+                />
+              </div>
+            </form>
+          </div>
+          {!isValid ? (
+            <div className="tabcontent" id="innerlink">
+              <p>No TOC/TOT/TOF styles</p>
+              <div className="czi-form-buttons">
+                <CustomButton label="Cancel" onClick={this._cancel} />
+              </div>
+            </div>
+          ) : (
+            <div className="tabcontent" id="innerlink">
+              <form action="#">
+                <label>Select the Inner Link</label>
+                <br></br>
+                <select
+                  defaultValue={
+                    TOCselectedNode_.some(
+                      (res) => res?.content[0]?.text === url
+                    )
+                      ? url
+                      : null
+                  }
+                  id="toc"
+                  name="toccontents"
+                  size="3"
+                >
+                  {TOCselectedNode_?.filter(
+                    (res) => res?.content[0]?.text?.trim() !== ''
+                  ).map((res, index) => (
+                    <option
+                      data-tooltip-content={res?.content[0]?.text}
+                      data-tooltip-id="select-toc-tooltip"
+                      key={index}
+                      onClick={() => {
+                        this.handleOptionChange(
+                          res?.content[0]?.text,
+                          res?.attrs.selectionId
+                        );
+                      }}
+                      value={res?.content[0]?.text}
+                    >
+                      {res?.content[0]?.text}
+                    </option>
+                  ))}
+                </select>
+                <ReactTooltip
+                  effect="solid"
+                  id="select-toc-tooltip"
+                  place="bottom"
+                />
+                <br></br>
+                <div className="czi-form-buttons">
+                  <CustomButton label="Cancel" onClick={this._cancel} />
+                </div>
+              </form>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  handleOptionChange = (textContent_, selectionId) => {
+    const texthash = '';
+    const nodeconcat_UUID = texthash.concat(selectionId);
+    const textContent = nodeconcat_UUID.concat(INNER_LINK, textContent_);
+    this.props.close(textContent);
+  };
+
+  _onKeyDown = (e: any) => {
+    if (e.keyCode === ENTER) {
+      e.preventDefault();
+      this._apply();
+    }
+  };
+
+  _onURLChange = (e: SyntheticInputEvent<>) => {
+    const url = e.target.value;
+    this.setState({
+      url,
+    });
+  };
+
+  _cancel = (): void => {
+    this.props.close();
+  };
+
+  _apply = (): void => {
+    const { url } = this.state;
+    if (url && !BAD_CHARACTER_PATTER.test(url)) {
+      this.props.close(sanitizeURL(url));
+    }
+  };
+}
+
+export default LinkURLEditor;

package/ui/ListItemNodeView.js.flow

@@ -1,101 +1,101 @@
-// @flow
-
-import { Node } from 'prosemirror-model';
-import { Decoration, EditorView } from 'prosemirror-view';
-import { MARK_TEXT_COLOR, MARK_FONT_SIZE } from '../MarkNames.js';
-
-// This implements the `NodeView` interface
-// https://prosemirror.net/docs/ref/#view.NodeView
-class ListItemNodeView {
-  // This implements the `NodeView` interface
-  // The outer DOM node that represents the list item element.
-  dom: HTMLLIElement;
-
-  // This implements the `NodeView` interface.
-  // The DOM node that should hold the node's content.
-  contentDOM: HTMLLIElement;
-
-  _nodeUpdated: ?Node;
-
-  constructor(
-    node: Node,
-    editorView: EditorView,
-    getPos: () => number,
-    decorations: Array<Decoration>
-  ) {
-    const dom = document.createElement('li');
-    this.dom = dom;
-    this._editorView = editorView;
-    this.contentDOM = dom;
-    this._updateDOM(node);
-  }
-
-  // This implements the `NodeView` interface.
-  update(node: Node, decorations: Array<Decoration>): boolean {
-    return this._updateDOM(node);
-  }
-
-  _updateDOM(node: Node): boolean {
-    if (this._nodeUpdated === node) {
-      return false;
-    }
-
-    this._nodeUpdated = node;
-
-    const dom = this.dom;
-    // According to `ListItemNodeSpec`, a valid list item has the following
-    // structure: `li > paragraph > text`.
-    const paragraph = node.firstChild;
-    const initialContent = paragraph ? paragraph.firstChild : null;
-
-    // This resolves the styles for the counter by examines the marks for the
-    // first text node of the list item.
-    let marks =
-      initialContent && initialContent.isText && initialContent.textContent
-        ? initialContent.marks
-        : null;
-    if (!marks) {
-      marks = this._editorView.state.tr.storedMarks;
-    }
-    let cssColor;
-    let cssFontSize;
-    let cssText = '';
-    if (Array.isArray(marks)) {
-      marks.forEach((mark) => {
-        const { attrs, type } = mark;
-        switch (type.name) {
-          case MARK_TEXT_COLOR:
-            cssColor = attrs.color;
-            break;
-          case MARK_FONT_SIZE:
-            cssFontSize = attrs.pt;
-            break;
-        }
-      });
-    }
-
-    // The counter of the list item is a pseudo-element that uses
-    // the CSS variables (e.g `--czi-list-style-color`) for styling.
-    // This defines the CSS variables scoped for the pseudo-element.
-    // See `src/ui/czi-list.css` for more details.
-    if (cssColor) {
-      cssText += `--czi-list-style-color: ${cssColor};`;
-    }
-
-    if (cssFontSize) {
-      cssText += `--czi-list-style-font-size: ${cssFontSize}pt;`;
-    }
-
-    dom.style.cssText = cssText;
-
-    const { align } = node.attrs;
-    if (align) {
-      dom.setAttribute('data-align', align);
-    } else {
-      dom.removeAttribute('data-align');
-    }
-    return true;
-  }
-}
-
-export default ListItemNodeView;
+// @flow
+
+import { Node } from 'prosemirror-model';
+import { Decoration, EditorView } from 'prosemirror-view';
+import { MARK_TEXT_COLOR, MARK_FONT_SIZE } from '../MarkNames.js';
+
+// This implements the `NodeView` interface
+// https://prosemirror.net/docs/ref/#view.NodeView
+class ListItemNodeView {
+  // This implements the `NodeView` interface
+  // The outer DOM node that represents the list item element.
+  dom: HTMLLIElement;
+
+  // This implements the `NodeView` interface.
+  // The DOM node that should hold the node's content.
+  contentDOM: HTMLLIElement;
+
+  _nodeUpdated: ?Node;
+
+  constructor(
+    node: Node,
+    editorView: EditorView,
+    getPos: () => number,
+    decorations: Array<Decoration>
+  ) {
+    const dom = document.createElement('li');
+    this.dom = dom;
+    this._editorView = editorView;
+    this.contentDOM = dom;
+    this._updateDOM(node);
+  }
+
+  // This implements the `NodeView` interface.
+  update(node: Node, decorations: Array<Decoration>): boolean {
+    return this._updateDOM(node);
+  }
+
+  _updateDOM(node: Node): boolean {
+    if (this._nodeUpdated === node) {
+      return false;
+    }
+
+    this._nodeUpdated = node;
+
+    const dom = this.dom;
+    // According to `ListItemNodeSpec`, a valid list item has the following
+    // structure: `li > paragraph > text`.
+    const paragraph = node.firstChild;
+    const initialContent = paragraph ? paragraph.firstChild : null;
+
+    // This resolves the styles for the counter by examines the marks for the
+    // first text node of the list item.
+    let marks =
+      initialContent && initialContent.isText && initialContent.textContent
+        ? initialContent.marks
+        : null;
+    if (!marks) {
+      marks = this._editorView.state.tr.storedMarks;
+    }
+    let cssColor;
+    let cssFontSize;
+    let cssText = '';
+    if (Array.isArray(marks)) {
+      marks.forEach((mark) => {
+        const { attrs, type } = mark;
+        switch (type.name) {
+          case MARK_TEXT_COLOR:
+            cssColor = attrs.color;
+            break;
+          case MARK_FONT_SIZE:
+            cssFontSize = attrs.pt;
+            break;
+        }
+      });
+    }
+
+    // The counter of the list item is a pseudo-element that uses
+    // the CSS variables (e.g `--czi-list-style-color`) for styling.
+    // This defines the CSS variables scoped for the pseudo-element.
+    // See `src/ui/czi-list.css` for more details.
+    if (cssColor) {
+      cssText += `--czi-list-style-color: ${cssColor};`;
+    }
+
+    if (cssFontSize) {
+      cssText += `--czi-list-style-font-size: ${cssFontSize}pt;`;
+    }
+
+    dom.style.cssText = cssText;
+
+    const { align } = node.attrs;
+    if (align) {
+      dom.setAttribute('data-align', align);
+    } else {
+      dom.removeAttribute('data-align');
+    }
+    return true;
+  }
+}
+
+export default ListItemNodeView;