Example #1
0
 _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.code code'), (el) => {
   let syntax = CodeMirror.findModeByName(convertModeName(el.className))
   if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
   CodeMirror.requireMode(syntax.mode, () => {
     const content = htmlTextHelper.decodeEntities(el.innerHTML)
     const copyIcon = document.createElement('i')
     copyIcon.innerHTML = '<button class="clipboardButton"><svg width="13" height="13" viewBox="0 0 1792 1792" ><path d="M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z"/></svg></button>'
     copyIcon.onclick = (e) => {
       copy(content)
       if (showCopyNotification) {
         this.notify('Saved to Clipboard!', {
           body: 'Paste it wherever you want!',
           silent: true
         })
       }
     }
     el.parentNode.appendChild(copyIcon)
     el.innerHTML = ''
     if (codeBlockTheme.indexOf('solarized') === 0) {
       const [refThema, color] = codeBlockTheme.split(' ')
       el.parentNode.className += ` cm-s-${refThema} cm-s-${color}`
     } else {
       el.parentNode.className += ` cm-s-${codeBlockTheme}`
     }
     CodeMirror.runMode(content, syntax.mime, el, {
       tabSize: indentSize
     })
   })
 })
Example #2
0
    const viewList = note.snippets.map((snippet, index) => {
      const isActive = this.state.snippetIndex === index

      let syntax = CodeMirror.findModeByName(convertModeName(snippet.mode))
      if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')

      return <div styleName='tabView'
        key={index}
        style={{zIndex: isActive ? 5 : 4}}
      >
        {snippet.mode === 'Markdown' || snippet.mode === 'GitHub Flavored Markdown'
          ? <MarkdownEditor styleName='tabView-content'
            value={snippet.content}
            config={config}
            onChange={(e) => this.handleCodeChange(index)(e)}
            ref={'code-' + index}
            ignorePreviewPointerEvents={this.props.ignorePreviewPointerEvents}
            storageKey={storageKey}
          />
          : <CodeEditor styleName='tabView-content'
            mode={snippet.mode}
            value={snippet.content}
            theme={config.editor.theme}
            fontFamily={config.editor.fontFamily}
            fontSize={editorFontSize}
            indentType={config.editor.indentType}
            indentSize={editorIndentSize}
            displayLineNumbers={config.editor.displayLineNumbers}
            keyMap={config.editor.keyMap}
            scrollPastEnd={config.editor.scrollPastEnd}
            fetchUrlTitle={config.editor.fetchUrlTitle}
            onChange={(e) => this.handleCodeChange(index)(e)}
            ref={'code-' + index}
          />
        }
      </div>
    })