]> BookStack Code Mirror - bookstack/commitdiff
Merge branch 'master' of git://github.com/albergoniSivaf/BookStack into albergoniSiva...
authorDan Brown <redacted>
Fri, 27 Dec 2019 17:03:10 +0000 (17:03 +0000)
committerDan Brown <redacted>
Fri, 27 Dec 2019 17:03:10 +0000 (17:03 +0000)
1  2 
resources/js/services/code.js
resources/views/components/code-editor.blade.php

index 93c3e431f4f5baf7482c898539599f4f8ad2e3e8,fe8da77739e752f03f283bf42b49ec0bb25dc03c..8e517dde45abcd794537a6c87ac56092af6fd9d2
@@@ -16,7 -16,6 +16,7 @@@ import 'codemirror/mode/mllike/mllike'
  import 'codemirror/mode/nginx/nginx';
  import 'codemirror/mode/php/php';
  import 'codemirror/mode/powershell/powershell';
 +import 'codemirror/mode/properties/properties';
  import 'codemirror/mode/python/python';
  import 'codemirror/mode/ruby/ruby';
  import 'codemirror/mode/rust/rust';
@@@ -25,13 -24,11 +25,14 @@@ import 'codemirror/mode/sql/sql'
  import 'codemirror/mode/toml/toml';
  import 'codemirror/mode/xml/xml';
  import 'codemirror/mode/yaml/yaml';
+ import 'codemirror/mode/pascal/pascal'
  
  // Addons
  import 'codemirror/addon/scroll/scrollpastend';
  
 +// Mapping of possible languages or formats from user input to their codemirror modes.
 +// Value can be a mode string or a function that will receive the code content & return the mode string.
 +// The function option is used in the event the exact mode could be dynamic depending on the code.
  const modeMap = {
      css: 'css',
      c: 'text/x-csrc',
@@@ -46,7 -43,6 +47,7 @@@
      haskell: 'haskell',
      hs: 'haskell',
      html: 'htmlmixed',
 +    ini: 'properties',
      javascript: 'javascript',
      json: {name: 'javascript', json: true},
      js: 'javascript',
      ml: 'mllike',
      nginx: 'nginx',
      powershell: 'powershell',
 +    properties: 'properties',
      ocaml: 'mllike',
 -    php: 'php',
 +    php: (content) => {
 +        return content.includes('<?php') ? 'php' : 'text/x-php';
 +    },
      py: 'python',
      python: 'python',
      ruby: 'ruby',
@@@ -78,6 -71,7 +79,7 @@@
      xml: 'xml',
      yaml: 'yaml',
      yml: 'yaml',
+     pascal: 'text/x-pascal',
  };
  
  /**
@@@ -95,23 -89,21 +97,23 @@@ function highlight() 
   * @param {HTMLElement} elem
   */
  function highlightElem(elem) {
 -    let innerCodeElem = elem.querySelector('code[class^=language-]');
 +    const innerCodeElem = elem.querySelector('code[class^=language-]');
 +    elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
 +    const content = elem.textContent;
 +
      let mode = '';
      if (innerCodeElem !== null) {
 -        let langName = innerCodeElem.className.replace('language-', '');
 -        mode = getMode(langName);
 +        const langName = innerCodeElem.className.replace('language-', '');
 +        mode = getMode(langName, content);
      }
 -    elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
 -    let content = elem.textContent.trim();
  
 -    let cm = CodeMirror(function(elt) {
 +    const cm = CodeMirror(function(elt) {
          elem.parentNode.replaceChild(elt, elem);
      }, {
          value: content,
          mode:  mode,
          lineNumbers: true,
 +        lineWrapping: false,
          theme: getTheme(),
          readOnly: true
      });
@@@ -146,24 -138,12 +148,24 @@@ function addCopyIcon(cmInstance) 
  
  /**
   * Search for a codemirror code based off a user suggestion
 - * @param suggestion
 + * @param {String} suggestion
 + * @param {String} content
   * @returns {string}
   */
 -function getMode(suggestion) {
 +function getMode(suggestion, content) {
      suggestion = suggestion.trim().replace(/^\./g, '').toLowerCase();
 -    return (typeof modeMap[suggestion] !== 'undefined') ? modeMap[suggestion] : '';
 +
 +    const modeMapType = typeof modeMap[suggestion];
 +
 +    if (modeMapType === 'undefined') {
 +        return '';
 +    }
 +
 +    if (modeMapType === 'function') {
 +        return modeMap[suggestion](content);
 +    }
 +
 +    return modeMap[suggestion];
  }
  
  /**
@@@ -181,8 -161,8 +183,8 @@@ function getTheme() 
   * @returns {{wrap: Element, editor: *}}
   */
  function wysiwygView(elem) {
 -    let doc = elem.ownerDocument;
 -    let codeElem = elem.querySelector('code');
 +    const doc = elem.ownerDocument;
 +    const codeElem = elem.querySelector('code');
  
      let lang = (elem.className || '').replace('language-', '');
      if (lang === '' && codeElem) {
      }
  
      elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
 -    let content = elem.textContent;
 -    let newWrap = doc.createElement('div');
 -    let newTextArea = doc.createElement('textarea');
 +    const content = elem.textContent;
 +    const newWrap = doc.createElement('div');
 +    const newTextArea = doc.createElement('textarea');
  
      newWrap.className = 'CodeMirrorContainer';
      newWrap.setAttribute('data-lang', lang);
          newWrap.appendChild(elt);
      }, {
          value: content,
 -        mode:  getMode(lang),
 +        mode:  getMode(lang, content),
          lineNumbers: true,
 +        lineWrapping: false,
          theme: getTheme(),
          readOnly: true
      });
   * @returns {*}
   */
  function popupEditor(elem, modeSuggestion) {
 -    let content = elem.textContent;
 +    const content = elem.textContent;
  
      return CodeMirror(function(elt) {
          elem.parentNode.insertBefore(elt, elem);
          elem.style.display = 'none';
      }, {
          value: content,
 -        mode:  getMode(modeSuggestion),
 +        mode:  getMode(modeSuggestion, content),
          lineNumbers: true,
 -        theme: getTheme(),
 -        lineWrapping: true
 +        lineWrapping: false,
 +        theme: getTheme()
      });
  }
  
   * @param cmInstance
   * @param modeSuggestion
   */
 -function setMode(cmInstance, modeSuggestion) {
 -      cmInstance.setOption('mode', getMode(modeSuggestion));
 +function setMode(cmInstance, modeSuggestion, content) {
 +      cmInstance.setOption('mode', getMode(modeSuggestion, content));
  }
  
  /**
  function setContent(cmInstance, codeContent) {
      cmInstance.setValue(codeContent);
      setTimeout(() => {
 -        cmInstance.refresh();
 +        updateLayout(cmInstance);
      }, 10);
  }
  
  /**
 - * Get a CodeMirror instace to use for the markdown editor.
 + * Update the layout (codemirror refresh) of a cm instance.
 + * @param cmInstance
 + */
 +function updateLayout(cmInstance) {
 +    cmInstance.refresh();
 +}
 +
 +/**
 + * Get a CodeMirror instance to use for the markdown editor.
   * @param {HTMLElement} elem
   * @returns {*}
   */
  function markdownEditor(elem) {
 -    let content = elem.textContent;
 -
 -    return CodeMirror(function (elt) {
 -        elem.parentNode.insertBefore(elt, elem);
 -        elem.style.display = 'none';
 -    }, {
 +    const content = elem.textContent;
 +    const config = {
          value: content,
          mode: "markdown",
          lineNumbers: true,
 -        theme: getTheme(),
          lineWrapping: true,
 +        theme: getTheme(),
          scrollPastEnd: true,
 -    });
 +    };
 +
 +    window.$events.emitPublic(elem, 'editor-markdown-cm::pre-init', {config});
 +
 +    return CodeMirror(function (elt) {
 +        elem.parentNode.insertBefore(elt, elem);
 +        elem.style.display = 'none';
 +    }, config);
  }
  
  /**
@@@ -309,7 -277,6 +311,7 @@@ export default 
      popupEditor: popupEditor,
      setMode: setMode,
      setContent: setContent,
 +    updateLayout: updateLayout,
      markdownEditor: markdownEditor,
      getMetaKey: getMetaKey,
  };
index f8377b1208d49e03c3ac0bad95b7610ebd7cf164,869651a5c67f44e283c50258b74a34f2064a6b17..eac5ce1653e55a55142b1eb4de60e2ef1a60c76f
@@@ -18,7 -18,6 +18,7 @@@
                              <a @click="updateLanguage('C#')">C#</a>
                              <a @click="updateLanguage('Go')">Go</a>
                              <a @click="updateLanguage('HTML')">HTML</a>
 +                            <a @click="updateLanguage('INI')">INI</a>
                              <a @click="updateLanguage('Java')">Java</a>
                              <a @click="updateLanguage('JavaScript')">JavaScript</a>
                              <a @click="updateLanguage('JSON')">JSON</a>
@@@ -33,6 -32,7 +33,7 @@@
                              <a @click="updateLanguage('SQL')">SQL</a>
                              <a @click="updateLanguage('XML')">XML</a>
                              <a @click="updateLanguage('YAML')">YAML</a>
+                             <a @click="updateLanguage('PASCAL')">Pascal</a>
                          </small>
                      </div>
                      <input @keypress.enter="save()" id="code-editor-language" type="text" @input="updateEditorMode(language)" v-model="language">