Left switch text type always open functionality

app/components/SimpleEditor/config.js

@@ -12,8 +12,8 @@ import {
   SpellCheckPackage,
   StrongPackage,
   SubscriptPackage,
-  SuperscriptPackage,
-  SwitchTextTypePackage
+  SuperscriptPackage
+  // SwitchTextTypePackage
 } from 'substance'
 
 // My Elements
@@ -24,6 +24,7 @@ import ListPackage from './elements/list/ListPackage'
 import NotePackage from './elements/note/NotePackage'
 import SourceNotePackage from './elements/source_note/SourceNotePackage'
 import TrackChangePackage from './elements/track_change/TrackChangePackage'
+import LeftSwitchTextTypePackage from './elements/left_switch_text_type/LeftSwitchTextTypePackage'
 
 let config = {
   name: 'simple-editor',
@@ -38,7 +39,6 @@ let config = {
       noBaseStyles: options.noBaseStyles
     })
 
-    config.import(SwitchTextTypePackage)
     config.import(ParagraphPackage)
     config.import(HeadingPackage)
     config.import(EmphasisPackage)
@@ -58,6 +58,7 @@ let config = {
     config.import(SourceNotePackage)
     config.import(SpellCheckPackage)
     config.import(TrackChangePackage)
+    config.import(LeftSwitchTextTypePackage)
   }
 }
 

app/components/SimpleEditor/elements/left_switch_text_type/LeftSwitchTextTypeCommand.js

+import { isMatch, find } from 'lodash'
+import clone from '../../../utils/clone'
+import {Command} from 'substance'
+
+class LeftSwitchTextTypeCommand extends Command {
+  // Available text types on the surface
+
+  getTextTypes (params) {
+    let surface = params.surface
+    if (surface && surface.isContainerEditor()) {
+      return surface.getTextTypes()
+    } else {
+      return []
+    }
+  }
+
+  getTextType (params) {
+    let textTypes = this.getTextTypes(params)
+    return find(textTypes, function (t) {
+      return t.name === params.textType
+    })
+  }
+
+  // Search which textType matches the current node
+  // E.g. {type: 'heading', level: 1} => heading1
+  getCurrentTextType (params, node) {
+    let textTypes = this.getTextTypes(params)
+    let currentTextType
+    textTypes.forEach(function (textType) {
+      let nodeProps = clone(textType.data)
+      delete nodeProps.type
+      if (isMatch(node, nodeProps) && node.type === textType.data.type) {
+        currentTextType = textType
+      }
+    })
+    return currentTextType
+  }
+
+  isDisabled ({selection, surface}) {
+    if (!surface || !surface.isEnabled() || selection.isNull()) {
+      return true
+    }
+    // When command is configured to be disabled for collapsed cursor
+    if (selection && this.config.disableCollapsedCursor && selection.isCollapsed()) {
+      return true
+    }
+    return false
+  }
+
+  getCommandState (params) {
+    let doc = params.editorSession.getDocument()
+    let sel = params.selection
+
+    let node
+    let newState = {
+      disabled: false,
+      textTypes: this.getTextTypes(params)
+    }
+    // Set disabled when not a property selection
+    if (this.isDisabled(params)) {
+      newState.disabled = true
+    } else if (sel.isContainerSelection()) {
+      newState.disabled = true
+      newState.currentTextType = {name: 'container-selection'}
+    } else if (sel.isPropertySelection()) {
+      let path = sel.getPath()
+      node = doc.get(path[0])
+      // There are cases where path points to an already deleted node,
+      // so we need to guard node
+      if (node) {
+        if (node.isText() && node.isBlock()) {
+          newState.currentTextType = this.getCurrentTextType(params, node)
+        }
+        if (!newState.currentTextType) {
+          // We 'abuse' the currentTextType field by providing a property
+          // identifier that is translated into a name using an default label set.
+          // E.g. this.getLabel('figure.caption') -> Figure Caption
+          newState.currentTextType = {name: [node.type, path[1]].join('.')}
+          newState.disabled = true
+        }
+      }
+    } else if (sel.isNodeSelection()) {
+      node = doc.get(sel.getNodeId())
+      newState.currentTextType = {name: node.type}
+      newState.disabled = true
+    } else if (sel.isCustomSelection()) {
+      newState.currentTextType = {name: 'custom'}
+      newState.disabled = true
+    }
+    return newState
+  }
+
+  /**
+    Trigger a switchTextType transaction
+   */
+  execute (params) {
+    let textType = this.getTextType(params)
+    let nodeData = textType.data
+    let surface = params.surface
+    let editorSession = params.editorSession
+    if (!surface) {
+      console.warn('No focused surface. Stopping command execution.')
+      return
+    }
+    editorSession.transaction(function (tx) {
+      return tx.switchTextType(nodeData)
+    })
+    return nodeData
+  }
+}
+
+export default LeftSwitchTextTypeCommand

app/components/SimpleEditor/elements/left_switch_text_type/LeftSwitchTextTypePackage.js

+import LeftSwitchTextTypeCommand from './LeftSwitchTextTypeCommand'
+import LeftSwitchTextTypeTool from './LeftSwitchTextTypeTool'
+
+export default {
+  name: 'switch-text-type',
+  configure: function (config, options) {
+    config.addToolGroup('text')
+    config.addCommand('switch-text-type', LeftSwitchTextTypeCommand)
+    config.addTool('switch-text-type', LeftSwitchTextTypeTool, {toolGroup: options.toolGroup || 'text'})
+  }
+}

app/components/SimpleEditor/elements/left_switch_text_type/LeftSwitchTextTypeTool.js

+import { SwitchTextTypeTool } from 'substance'
+
+/**
+  SwitchTextTypeTool. Implements the SurfaceTool API.
+
+  @class
+  @component
+*/
+class LeftSwitchTextTypeTool extends SwitchTextTypeTool {
+  didMount (...args) {
+    super.didMount(...args)
+    this.extendState({open: true}) // hack just for the UCP Test
+    this._focusToggle()
+  }
+}
+
+LeftSwitchTextTypeTool.command = 'switch-text-type'
+
+export default LeftSwitchTextTypeTool

app/components/SimpleEditor/elements/left_switch_text_type/_switch-text-type.css

+/* Switch Text Type Component
+---------------------------- */
+
+.sc-switch-text-type {
+  overflow: visible;
+  position: relative;
+  width: 120px;
+  /*font-size: var(--small-font-size);*/
+  /*
+    When using --small-font-size = 13px we get a wrong
+    offset in the toolbar. Needs checking.
+  */
+  font-size: 12px;
+  font-weight: 600;
+}
+.sc-switch-text-type .se-toggle {
+  background: white;
+  height: 30px;
+  padding: 0px 10px;
+  display: block;
+  overflow: hidden;
+}
+.sc-switch-text-type:not(.sm-disabled) .se-toggle:after {
+  content: " \f0d7";
+  padding-left: 10px;
+  margin-top: 2px;
+  float: right;
+  font-family: FontAwesome;
+}
+.sc-switch-text-type.sm-disabled { opacity: 0.4; cursor: default; }
+.sc-switch-text-type.sm-disabled:hover { background: none; }
+.sc-switch-text-type .se-options {
+  display: none;
+  position: absolute;
+  background: white;
+  top: 40px;
+  z-index: 5000;
+  min-width: 150px;
+  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.15);
+  border: 1px solid var(--border-color);
+}
+.sc-switch-text-type .se-options .se-option {
+  display: block;
+  padding: 5px 10px;
+  width: 100%; /* needed to make buttons render like block elements */
+}
+.sc-switch-text-type .se-options .se-option:hover,
+.sc-switch-text-type .se-options .se-option:focus {
+  background: rgba(0,0,0,0.05);
+}
+.sc-switch-text-type.sm-open .se-options { display: block; }

app/components/utils/clone.js

+import { isObject, isArray } from 'substance'
+
+function clone (val) {
+  if (isArray(val)) {
+    return val.slice(0)
+  }
+  if (isObject(val)) {
+    return Object.assign({}, val)
+  }
+  // we do not clone primitives
+  // TODO: is that ok?
+  return val
+}
+
+export default clone