@modusoperandi/licit 1.0.4 → 1.0.7

package/ui/LinkURLEditor.js

@@ -1,28 +1,31 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import sanitizeURL from '../sanitizeURL.js';
-import { CustomButton } from '@modusoperandi/licit-ui-commands';
+import { CustomButton, preventEventDefault } from '@modusoperandi/licit-ui-commands';
 import { ENTER } from './KeyCodes.js';
-import { preventEventDefault } from '@modusoperandi/licit-ui-commands';
+import uuid from '../uuid.js';
 import './czi-form.css';
 import './czi-image-url-editor.css';
+import { EditorView } from 'prosemirror-view';
+import { INNER_LINK } from '../Types.js';
+import 'react-tooltip/dist/react-tooltip.css';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
 var BAD_CHARACTER_PATTER = /\s/;
 var LinkURLEditor = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(LinkURLEditor, _React$PureComponent);
   function LinkURLEditor() {
     var _this;
     _classCallCheck(this, LinkURLEditor);
@@ -30,25 +33,65 @@ var LinkURLEditor = /*#__PURE__*/function (_React$PureComponent) {
       args[_key] = arguments[_key];
     }
     _this = _callSuper(this, LinkURLEditor, [].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      url: _this.props.href
+    _defineProperty(_this, "state", {
+      url: _this.props.href_,
+      TOCselectedNode_: _this.props.TOCselectedNode_,
+      view_: _this.props.view_,
+      selectionId: _this.props.selectionId_
+    });
+    _defineProperty(_this, "openForm", function (formName) {
+      var i;
+      var tabcontent = document.getElementsByClassName('tabcontent');
+      for (i = 0; i < tabcontent.length; i++) {
+        tabcontent[i].style.display = 'none';
+      }
+      var tablinks = document.getElementsByClassName('tablinks');
+      for (i = 0; i < tablinks.length; i++) {
+        tablinks[i].classList.remove('active');
+      }
+      var selectedTab = document.getElementById(formName);
+      if (selectedTab) {
+        selectedTab.style.display = 'block';
+      }
+      var clickedButton = document.querySelector(".tablinks[data-form=\"".concat(formName, "\"]"));
+      if (clickedButton) {
+        clickedButton.classList.add('active');
+      }
     });
-    _defineProperty(_assertThisInitialized(_this), "_onKeyDown", function (e) {
+    _defineProperty(_this, "handleOptionChange", function (textContent_, tocNodePosition_, view) {
+      var _TocNode$attrs;
+      var tr = view.state.tr;
+      var TocNode = view.state.doc.nodeAt(tocNodePosition_);
+      var textContent;
+      if (!(TocNode !== null && TocNode !== void 0 && (_TocNode$attrs = TocNode.attrs) !== null && _TocNode$attrs !== void 0 && _TocNode$attrs.innerLink)) {
+        var nodeUUID = uuid();
+        var texthash = '#';
+        var nodeAttrs = TocNode.attrs;
+        var nodeconcat_UUID = texthash.concat(nodeUUID);
+        nodeAttrs.innerLink = nodeconcat_UUID;
+        tr.setNodeMarkup(tocNodePosition_, undefined, nodeAttrs);
+        textContent = nodeconcat_UUID.concat(INNER_LINK, textContent_);
+      } else {
+        textContent = TocNode.attrs.innerLink.concat(INNER_LINK, textContent_);
+      }
+      _this.props.close(textContent);
+    });
+    _defineProperty(_this, "_onKeyDown", function (e) {
       if (e.keyCode === ENTER) {
         e.preventDefault();
         _this._apply();
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "_onURLChange", function (e) {
+    _defineProperty(_this, "_onURLChange", function (e) {
       var url = e.target.value;
       _this.setState({
         url: url
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "_cancel", function () {
+    _defineProperty(_this, "_cancel", function () {
       _this.props.close();
     });
-    _defineProperty(_assertThisInitialized(_this), "_apply", function () {
+    _defineProperty(_this, "_apply", function () {
       var url = _this.state.url;
       if (url && !BAD_CHARACTER_PATTER.test(url)) {
         _this.props.close(sanitizeURL(url));
@@ -56,15 +99,38 @@ var LinkURLEditor = /*#__PURE__*/function (_React$PureComponent) {
     });
     return _this;
   }
-  _createClass(LinkURLEditor, [{
+  _inherits(LinkURLEditor, _React$PureComponent);
+  return _createClass(LinkURLEditor, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var selectionId = this.state.selectionId;
+      var defaultTab = selectionId ? 'innerlink' : 'webpage';
+      var selectedTab = this.props.selectedTab || defaultTab;
+      this.openForm(selectedTab);
+    }
+  }, {
     key: "render",
     value: function render() {
-      var href = this.props.href;
-      var url = this.state.url;
+      var _this2 = this;
+      var _this$state = this.state,
+        url = _this$state.url,
+        TOCselectedNode_ = _this$state.TOCselectedNode_,
+        view_ = _this$state.view_,
+        selectionId = _this$state.selectionId;
+      var isTOCValid = function isTOCValid() {
+        if (!TOCselectedNode_ || TOCselectedNode_.length === 0) {
+          return false;
+        }
+        return TOCselectedNode_.some(function (item) {
+          return item.node_ && item.node_.textContent.trim() !== '';
+        });
+      };
+      var isValid = isTOCValid();
+      console.log('isTOCValid:', isValid);
       var error = url ? BAD_CHARACTER_PATTER.test(url) : false;
       var label = 'Apply';
-      var disabled = !!error;
-      if (href) {
+      var disabled;
+      if (this.props.href) {
         label = url ? 'Apply' : 'Remove';
         disabled = error;
       } else {
@@ -72,17 +138,39 @@ var LinkURLEditor = /*#__PURE__*/function (_React$PureComponent) {
       }
       return /*#__PURE__*/React.createElement("div", {
         className: "czi-image-url-editor"
-      }, /*#__PURE__*/React.createElement("form", {
+      }, /*#__PURE__*/React.createElement("div", {
         className: "czi-form",
+        style: {
+          padding: '10px',
+          display: 'flex'
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "tab"
+      }, /*#__PURE__*/React.createElement("button", {
+        className: "tablinks",
+        "data-form": "webpage",
+        onClick: function onClick() {
+          return _this2.openForm('webpage');
+        }
+      }, "Existing Web Page"), /*#__PURE__*/React.createElement("button", {
+        className: "tablinks",
+        "data-form": "innerlink",
+        onClick: function onClick() {
+          return _this2.openForm('innerlink');
+        }
+      }, "Place in this Document")), /*#__PURE__*/React.createElement("div", {
+        className: "tabcontent",
+        id: "webpage"
+      }, /*#__PURE__*/React.createElement("form", {
         onSubmit: preventEventDefault
-      }, /*#__PURE__*/React.createElement("fieldset", null, /*#__PURE__*/React.createElement("legend", null, "Add a Link"), /*#__PURE__*/React.createElement("input", {
+      }, /*#__PURE__*/React.createElement("fieldset", null, /*#__PURE__*/React.createElement("label", null, "Add a Link : "), /*#__PURE__*/React.createElement("input", {
         autoFocus: true,
         onChange: this._onURLChange,
         onKeyDown: this._onKeyDown,
         placeholder: "Paste a URL",
         spellCheck: false,
         type: "text",
-        value: url || ''
+        value: selectionId ? null : url
       })), /*#__PURE__*/React.createElement("div", {
         className: "czi-form-buttons"
       }, /*#__PURE__*/React.createElement(CustomButton, {
@@ -92,23 +180,52 @@ var LinkURLEditor = /*#__PURE__*/function (_React$PureComponent) {
         active: true,
         disabled: disabled,
         label: label,
-        onClick: this._apply
-      }))));
+        onClick: function onClick() {
+          _this2._apply();
+        }
+      })))), !isValid ? /*#__PURE__*/React.createElement("div", {
+        className: "tabcontent",
+        id: "innerlink"
+      }, /*#__PURE__*/React.createElement("p", null, "No TOC styles"), /*#__PURE__*/React.createElement("div", {
+        className: "czi-form-buttons"
+      }, /*#__PURE__*/React.createElement(CustomButton, {
+        label: "Cancel",
+        onClick: this._cancel
+      }))) : /*#__PURE__*/React.createElement("div", {
+        className: "tabcontent",
+        id: "innerlink"
+      }, /*#__PURE__*/React.createElement("form", {
+        action: "#"
+      }, /*#__PURE__*/React.createElement("label", null, "Select the Inner Link"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("select", {
+        defaultValue: TOCselectedNode_.some(function (res) {
+          return res.node_.textContent === url;
+        }) ? url : null,
+        id: "toc",
+        name: "toccontents",
+        size: "3"
+      }, TOCselectedNode_ === null || TOCselectedNode_ === void 0 ? void 0 : TOCselectedNode_.filter(function (res) {
+        return res.node_.textContent.trim() !== '';
+      }).map(function (res, index) {
+        return /*#__PURE__*/React.createElement("option", {
+          "data-tooltip-content": res.node_.textContent,
+          "data-tooltip-id": "select-toc-tooltip",
+          key: index,
+          onClick: function onClick() {
+            _this2.handleOptionChange(res.node_.textContent, res.pos_, view_);
+          },
+          value: res.node_.textContent
+        }, res.node_.textContent);
+      })), /*#__PURE__*/React.createElement(ReactTooltip, {
+        effect: "solid",
+        id: "select-toc-tooltip",
+        place: "bottom"
+      }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
+        className: "czi-form-buttons"
+      }, /*#__PURE__*/React.createElement(CustomButton, {
+        label: "Cancel",
+        onClick: this._cancel
+      }))))));
     }
   }]);
-  return LinkURLEditor;
 }(React.PureComponent);
-// [FS] IRAD-1005 2020-07-07
-// Upgrade outdated packages.
-// To take care of the property type declaration.
-_defineProperty(LinkURLEditor, "propsTypes", {
-  href: PropTypes.string,
-  close: function close(props, propName) {
-    var fn = props[propName];
-    if (!fn.prototype || typeof fn.prototype.constructor !== 'function' && fn.prototype.constructor.length !== 1) {
-      return new Error(propName + 'must be a function with 1 arg of type string');
-    }
-    return null;
-  }
-});
 export default LinkURLEditor;

package/ui/LinkURLEditor.js.flow

@@ -1,117 +1,243 @@
-// @flow
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-
-import sanitizeURL from '../sanitizeURL.js';
-import {
-  CustomButton
-} from '@modusoperandi/licit-ui-commands';
-import {
-  ENTER
-} from './KeyCodes.js';
-import {
-  preventEventDefault
-} from '@modusoperandi/licit-ui-commands';
-
-import './czi-form.css';
-import './czi-image-url-editor.css';
-
-const BAD_CHARACTER_PATTER = /\s/;
-
-class LinkURLEditor extends React.PureComponent<any, any> {
-  // [FS] IRAD-1005 2020-07-07
-  // Upgrade outdated packages.
-  // To take care of the property type declaration.
-  static propsTypes = {
-    href: PropTypes.string,
-    close: function (props: any, propName: string) {
-      const fn = props[propName];
-      if (
-        !fn.prototype ||
-        (typeof fn.prototype.constructor !== 'function' &&
-          fn.prototype.constructor.length !== 1)
-      ) {
-        return new Error(
-          propName + 'must be a function with 1 arg of type string'
-        );
-      }
-      return null;
-    },
-  };
-
-  state = {
-    url: this.props.href,
-  };
-
-  render(): React.Element<any> {
-    const { href } = this.props;
-    const { url } = this.state;
-
-    const error = url ? BAD_CHARACTER_PATTER.test(url) : false;
-
-    let label = 'Apply';
-    let disabled = !!error;
-    if (href) {
-      label = url ? 'Apply' : 'Remove';
-      disabled = error;
-    } else {
-      disabled = error || !url;
-    }
-
-    return (
-      <div className="czi-image-url-editor">
-        <form className="czi-form" onSubmit={preventEventDefault}>
-          <fieldset>
-            <legend>Add a Link</legend>
-            <input
-              autoFocus={true}
-              onChange={this._onURLChange}
-              onKeyDown={this._onKeyDown}
-              placeholder="Paste a URL"
-              spellCheck={false}
-              type="text"
-              value={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>
-    );
-  }
-
-  _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 uuid from '../uuid.js';
+
+import './czi-form.css';
+import './czi-image-url-editor.css';
+import { EditorView } from 'prosemirror-view';
+import { INNER_LINK } from '../Types.js';
+import 'react-tooltip/dist/react-tooltip.css';
+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_,
+    view_: this.props.view_,
+    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_, view_, selectionId } =
+      this.state;
+
+    const isTOCValid = () => {
+      if (!TOCselectedNode_ || TOCselectedNode_.length === 0) {
+        return false;
+      }
+
+      return TOCselectedNode_.some(
+        item => item.node_ && item.node_.textContent.trim() !== ''
+      );
+    };
+    const isValid = isTOCValid();
+    console.log('isTOCValid:', isValid);
+
+    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 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.node_.textContent === url) ? url : null
+                  }
+                  id="toc"
+                  name="toccontents"
+                  size="3"
+                >
+                  {TOCselectedNode_?.filter(res => res.node_.textContent.trim() !== '').map((res, index) => (
+                    <option
+                      data-tooltip-content={res.node_.textContent}
+                      data-tooltip-id="select-toc-tooltip"
+                      key={index}
+                      onClick={() => {
+                        this.handleOptionChange(
+                          res.node_.textContent,
+                          res.pos_,
+                          view_
+                        );
+                      }}
+                      value={res.node_.textContent}
+                    >
+                      {res.node_.textContent}
+                    </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_, tocNodePosition_, view: EditorView) => {
+    const tr = view.state.tr;
+    const TocNode = view.state.doc.nodeAt(tocNodePosition_);
+    let textContent;
+    if (!TocNode?.attrs?.innerLink) {
+      const nodeUUID = uuid();
+      const texthash = '#';
+      const nodeAttrs = TocNode.attrs;
+      const nodeconcat_UUID = texthash.concat(nodeUUID);
+      nodeAttrs.innerLink = nodeconcat_UUID;
+      tr.setNodeMarkup(tocNodePosition_, undefined, nodeAttrs);
+      textContent = nodeconcat_UUID.concat(INNER_LINK, textContent_);
+    } else {
+      textContent = TocNode.attrs.innerLink.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;