@modusoperandi/licit 0.1.4 → 0.1.8

package/src/ui/CustomStyleItem.js

@@ -1,152 +0,0 @@
-// @flow
-
-import './czi-custom-button.css';
-import * as React from 'react';
-import { EditorState } from 'prosemirror-state';
-import { Transform } from 'prosemirror-transform';
-import { EditorView } from 'prosemirror-view';
-import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
-import './custom-dropdown.css';
-import { getCustomStyleByName, getCustomStyle } from '../customStyle';
-import PointerSurface from './PointerSurface';
-import type { PointerSurfaceProps } from './PointerSurface';
-import Icon from './Icon';
-import cx from 'classnames';
-class CustomStyleItem extends React.PureComponent<any, any> {
-  props: PointerSurfaceProps & {
-    command: UICommand,
-    disabled?: ?boolean,
-    dispatch: (tr: Transform) => void,
-    editorState: EditorState,
-    editorView: ?EditorView,
-    label: string,
-    onClick: ?(value: any, e: SyntheticEvent<>) => void,
-    onMouseEnter: ?(value: any, e: SyntheticEvent<>) => void,
-    hasText?: ?Boolean,
-    onCommand: ?Function,
-    selectionClassName: ?string,
-  };
-
-  render(): React.Element<any> {
-    const { label, hasText, ...pointerProps } = this.props;
-    let text = '';
-    let customStyle;
-    // [FS] IRAD-1410 2021-06-28
-    // The numbering in custom style drop menu not showing properly
-    text = ' AaBbCcDd';
-    const level = this.sampleLevel(pointerProps.command._customStyle.styles);
-    const hasBoldPartial = this.hasBoldPartial(
-      pointerProps.command._customStyle.styles
-    );
-    // [FS] IRAD-1505 2021-07-07
-    // Style menu not showing properly for First Word Bold
-    const hasBoldSentence = this.hasBoldSentence(pointerProps.command._customStyle.styles);
-    // [FS] IRAD-1394 2021-05-25
-    // Added two divs to display Numbering and bold first word/sentece.
-    const BOLD_WORD = 'AaBb  ';
-    const BOLD_SENTENCE = 'AaBbCc. ';
-    const styleProps = getCustomStyleByName(label);
-    const className = 'czi-custom-menu-item';
-    if (styleProps && styleProps.styles) {
-      customStyle = getCustomStyle(styleProps.styles);
-    }
-    const klass = cx(className);
-    return (
-      <div
-        className={this.props.selectionClassName}
-        id="container1"
-        tag={label}
-      >
-        <div style={{ width: '140px', height: 'auto' }}>
-          <PointerSurface
-            {...pointerProps}
-            className={klass}
-            style={{ display: 'inline-block', width: '140px' }}
-          >
-            {label}
-          </PointerSurface>
-        </div>
-        <div
-          style={{
-            display: level === '' ? 'none' : '',
-            // [FS] IRAD-1410 2021-06-02
-            // Issue: Number example in custom style menu box not showing properly
-            marginTop: '-4px',
-            fontWeight:
-              pointerProps.command._customStyle.styles &&
-                pointerProps.command._customStyle.styles.boldNumbering
-                ? 'bold'
-                : 'normal',
-          }}
-        >
-          <PointerSurface
-            {...pointerProps}
-            className={klass}
-            style={customStyle}
-          >
-            {level}
-          </PointerSurface>
-        </div>
-        <div
-          style={{
-            display: hasBoldPartial ? '' : 'none',
-            // [FS] IRAD-1410 2021-06-03
-            // Issue: Number example along with Bold first word in custom style menu box not showing properly
-            marginTop: '-4px',
-            fontWeight: hasBoldPartial ? 'bold' : 'normal',
-          }}
-        >
-          <PointerSurface
-            {...pointerProps}
-            className={klass}
-            style={customStyle}
-          >
-            {(hasBoldPartial && hasBoldSentence) ? BOLD_SENTENCE : BOLD_WORD}
-          </PointerSurface>
-        </div>
-        <div className="style-sampletext" style={customStyle}>
-          <PointerSurface
-            {...pointerProps}
-            className={klass}
-            style={customStyle}
-          >
-            {text}
-          </PointerSurface>
-        </div>
-        <div
-          className="arrow-right"
-          style={{ width: '50px' }}
-          style={hasText ? { display: 'block' } : { display: 'none' }}
-        >
-          {/* Need to change the below icon to downarroe */}
-          <PointerSurface {...pointerProps} className={klass + ' edit-icon'}>
-            {Icon.get('edit')}
-            {''}
-          </PointerSurface>
-        </div>
-      </div>
-    );
-  }
-
-  // [FS] IRAD-1394 2021-05-25
-  // To show Numbering in dropdown menu sample text
-  sampleLevel(styles: any): string {
-    let level = '';
-    if (this.props.hasText && styles && styles.hasNumbering) {
-      for (let i = 0; i < parseInt(styles.styleLevel); i++) {
-        level = level + '1.';
-      }
-    }
-    return level;
-  }
-
-  hasBoldPartial(styles: any) {
-    return styles && styles.boldPartial ? true : false;
-  }
-
-  hasBoldSentence(styles: any) {
-    return styles && styles.boldSentence ? true : false;
-  }
-}
-
-export default CustomStyleItem;

package/src/ui/CustomStyleSubMenu.js

@@ -1,54 +0,0 @@
-// @flow
-
-import './czi-custom-button.css';
-import * as React from 'react';
-import './custom-dropdown.css';
-import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
-
-class CustomStyleSubMenu extends React.PureComponent<any, any> {
-  props: {
-    command: UICommand,
-    disabled?: ?boolean,
-    close: (?string) => void,
-  };
-
-  render(): React.Element<any> {
-    const { command } = this.props;
-
-    return (
-      <div className="dropdown-content" id="mo-submenu">
-        <a
-          onClick={this.onButtonClick.bind(this, {
-            type: 'modify',
-            command: command,
-          })}
-        >
-          Modify Style..
-        </a>
-        <a
-          onClick={this.onButtonClick.bind(this, {
-            type: 'rename',
-            command: command,
-          })}
-        >
-          Rename Style..
-        </a>
-        <a
-          onClick={this.onButtonClick.bind(this, {
-            type: 'remove',
-            command: command,
-          })}
-        >
-          Remove Style..
-        </a>
-      </div>
-    );
-  }
-
-  //handles the option button click, close the popup with selected values
-  onButtonClick(val: Object) {
-    this.props.close(val);
-  }
-}
-
-export default CustomStyleSubMenu;

package/src/ui/HeadingCommandMenuButton.js

@@ -1,147 +0,0 @@
-// @flow
-
-import CustomMenuButton from './CustomMenuButton';
-import HeadingCommand from '../HeadingCommand';
-import CustomStyleCommand from '../CustomStyleCommand';
-import * as React from 'react';
-import { EditorState } from 'prosemirror-state';
-import { EditorView } from 'prosemirror-view';
-import { Transform } from 'prosemirror-transform';
-import { Node } from 'prosemirror-model';
-import {
-  RESERVED_STYLE_NONE,
-  RESERVED_STYLE_NONE_NUMBERING,
-} from '../ParagraphNodeSpec';
-
-// [FS] IRAD-1042 2020-09-09
-// To include custom styles in the toolbar
-
-let HEADING_COMMANDS: Object = {
-  [RESERVED_STYLE_NONE]: new HeadingCommand(0),
-};
-
-class HeadingCommandMenuButton extends React.PureComponent<any, any> {
-  props: {
-    dispatch: (tr: Transform) => void,
-    editorState: EditorState,
-    editorView: ?EditorView,
-  };
-  hasRuntime: boolean = true;
-  //[FS] IRAD-1085 2020-10-09
-  //method to build commands for list buttons
-  getCommandGroups() {
-    HEADING_COMMANDS = {
-      // [FS] IRAD-1074 2020-12-09
-      // When apply 'None' from style menu, not clearing the applied custom style.
-      [RESERVED_STYLE_NONE]: new CustomStyleCommand(
-        RESERVED_STYLE_NONE,
-        RESERVED_STYLE_NONE
-      ),
-    };
-    // Check runtime is avilable in editorview
-    // Get styles form server configured in runtime
-    if (
-      this.props.editorView &&
-      this.props.editorView.runtime &&
-      typeof this.props.editorView.runtime.getStylesAsync === 'function'
-    ) {
-      let HEADING_NAMES = null;
-      this.props.editorView.runtime.getStylesAsync().then((result) => {
-        if (result) {
-          HEADING_NAMES = result;
-          if (null != HEADING_NAMES) {
-            HEADING_NAMES.forEach((obj) => {
-              HEADING_COMMANDS[obj.styleName] = new CustomStyleCommand(
-                obj,
-                obj.styleName
-              );
-            });
-          }
-        }
-        return [HEADING_COMMANDS];
-      });
-      this.hasRuntime = true;
-    } else {
-      this.hasRuntime = false;
-    }
-    return [HEADING_COMMANDS];
-  }
-  staticCommands() {
-    const MENU_COMMANDS: Object = {
-      ['newstyle']: new CustomStyleCommand('newstyle', 'New Style..'),
-    };
-    // [FS] IRAD-1176 2021-02-08
-    // Added a menu "Edit All" for Edit All custom styles
-    MENU_COMMANDS['editall'] = new CustomStyleCommand('editall', 'Edit All');
-    MENU_COMMANDS['clearstyle'] = new CustomStyleCommand(
-      'clearstyle',
-      'Clear Style'
-    );
-    return [MENU_COMMANDS];
-  }
-  isAllowedNode(node: Node) {
-    return node.type.name === 'paragraph' || node.type.name === 'ordered_list';
-  }
-
-  render(): React.Element<any> {
-    const { dispatch, editorState, editorView } = this.props;
-    const { selection, doc } = editorState;
-    const { from, to } = selection;
-    let customStyleName;
-    let selectedStyleCount = 0;
-    // [FS] IRAD-1088 2020-10-05
-    // get the custom style name from node attribute
-    doc.nodesBetween(from, to, (node, pos) => {
-      // [FS] IRAD-1231 2021-03-05
-      // Issue fix : Applied custom style name shows only when click start and end position of paragraph,
-      // otherwise shows 'None'.
-      if (this.isAllowedNode(node)) {
-        if (node.attrs.styleName) {
-          // [FS] IRAD-1043 2020-10-27
-          // Show blank as style name when select paragraphs with multiple custom styles applied
-          selectedStyleCount++;
-          // [FS] IRAD-1100 2020-10-30
-          // Issue fix: style name shows blank when select multiple paragraph with same custom style applied
-          if (
-            1 === selectedStyleCount ||
-            (1 < selectedStyleCount && node.attrs.styleName === customStyleName)
-          ) {
-            customStyleName = node.attrs.styleName.includes(
-              RESERVED_STYLE_NONE_NUMBERING
-            )
-              ? RESERVED_STYLE_NONE
-              : node.attrs.styleName;
-          } else {
-            customStyleName = RESERVED_STYLE_NONE;
-          }
-        }
-        // [FS] IRAD-1231 2021-03-02
-        // Show the custom style as None for paste paragraph from outside.
-        else {
-          node.attrs.styleName = RESERVED_STYLE_NONE;
-          customStyleName = RESERVED_STYLE_NONE;
-        }
-      }
-    });
-
-    return (
-      <CustomMenuButton
-        className="width-100"
-        // [FS] IRAD-1008 2020-07-16
-        // Disable font type menu on editor disable state
-        commandGroups={this.getCommandGroups()}
-        disabled={
-          (editorView && editorView.disabled) || !this.hasRuntime ? true : false
-        }
-        dispatch={dispatch}
-        editorState={editorState}
-        editorView={editorView}
-        label={customStyleName}
-        parent={this}
-        staticCommand={this.staticCommands()}
-      />
-    );
-  }
-}
-
-export default HeadingCommandMenuButton;

package/src/ui/custom-dropdown.css

@@ -1,90 +0,0 @@
-.dropbtn {
-  background-color: #fff;
-  border-color: #cec7c7;
-  border-style: solid;
-  border-width: 1px;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
-  color: #5a615e;
-  cursor: pointer;
-  font-family: 'Arial', sans-serif;
-  font-size: 14px;
-  min-width: 160px;
-  padding: 5px;
-}
-
-.stylenames {
-  max-height: 205px;
-  min-height: 30px;
-  overflow: auto;
-}
-
-.dropdown {
-  display: inline-block;
-  position: relative;
-}
-
-.dropdown-content {
-  background-color: #f9f9f9;
-  border-color: #cec7c7;
-  border-style: solid;
-  border-width: 1px;
-  box-shadow: 0 8px 16px 0 rgba(26, 25, 25, 0.2);
-  box-sizing: border-box;
-  color: #5a615e;
-  font-family: 'Arial', sans-serif;
-  font-size: 14px;
-  height: 95px;
-  line-height: 0.75;
-  min-width: 136px;
-}
-
-.dropdown-content a {
-  display: block;
-  padding-bottom: 10px;
-  padding-left: 14px;
-  padding-right: 14px;
-  padding-top: 10px;
-  text-decoration: none;
-}
-
-.dropdown-content a:hover {
-  background-color: lightgrey;
-}
-
-.dropdown:hover .dropdown-content {
-  opacity: 1;
-  transition: opacity;
-  transition-delay: 2s;
-}
-
-#container1 {
-  /* background-color: #f9f9f9; */
-  display: flex;
-  justify-content: space-between;
-  line-height: 2;
-  width: 265px;
-}
-
-#container1 > div {
-  height: 30px;
-}
-
-#container1:hover {
-  background-color: lightgrey;
-}
-
-.selectbackground {
-  background-color: lightgrey;
-}
-
-.arrow-right {
-  text-align: right;
-  width: 30px;
-}
-
-.style-sampletext {
-  text-overflow: ellipsis;
-  width: 105px;
-  overflow: hidden;
-  white-space: nowrap;
-}