fix: code highlight error when open file contains code block (#891)

* fix: code highlight error when open file contains code block

* some typo error

* some style change

src/muya/lib/parser/render/renderBlock/renderContainerBlock.js

@@ -103,6 +103,7 @@ export default function renderContainerBlock (block, cursor, activeBlocks, selec
     Object.assign(data.dataset, { role: functionType })
     selector += PRE_BLOCK_HASH[block.functionType]
   }
+
   if (!block.parent) {
     return h(selector, data, [this.renderIcon(block), ...block.children.map(child => this.renderBlock(child, cursor, activeBlocks, selectedBlock, matches, useCache))])
   } else {

src/muya/lib/parser/render/renderBlock/renderIcon.js

@@ -27,7 +27,7 @@ export default function renderIcon (block) {
     console.error('Only top most block can render front icon button.')
   }
   const { type, functionType, listType } = block
-  const selector = `span.${CLASS_OR_ID['AG_FRONT_ICON']}`
+  const selector = `a.${CLASS_OR_ID['AG_FRONT_ICON']}`
   let icon = null
 
   switch (type) {

src/muya/lib/prism/loadLanguage.js

@@ -32,7 +32,7 @@ function getPeerDependents (mainLanguage) {
 }
 
 function initLoadLanguage (Prism) {
-  return function loadLanguages (arr, withoutDependencies) {
+  return async function loadLanguages (arr, withoutDependencies) {
     // If no argument is passed, load all components
     if (!arr) {
       arr = Object.keys(languages).filter(function (language) {
@@ -40,32 +40,46 @@ function initLoadLanguage (Prism) {
       })
     }
     if (arr && !arr.length) {
-      return
+      return Promise.reject('The first parameter should be a list of load languages or single language.')
     }
 
     if (!Array.isArray(arr)) {
       arr = [arr]
     }
 
-    arr.forEach(function (language) {
+    const promises = []
+
+    for (const language of arr) {
+      // handle not existed
       if (!languages[language]) {
-        console.warn('Language does not exist ' + language)
+        promises.push(Promise.resolve({
-        return
+          lang: language,
+          status: 'noexist'
+        }))
+        continue
       }
+      // handle already cached
       if (loadedCache.has(language)) {
-        return
+        promises.push(Promise.resolve({
+          lang: language,
+          status: 'cached'
+        }))
+        continue
       }
 
       // Load dependencies first
       if (!withoutDependencies && languages[language].require) {
-        loadLanguages(languages[language].require)
+        const results = await loadLanguages(languages[language].require)
+        promises.push(...results)
       }
 
       delete Prism.languages[language]
-      import('prismjs2/components/prism-' + language)
+      await import('prismjs2/components/prism-' + language)
-        .then(_ => {
       loadedCache.add(language)
-        })
+      promises.push(Promise.resolve({
+        status: 'loaded',
+        lang: language
+      }))
 
       // Reload dependents
       const dependents = getPeerDependents(language).filter(function (dependent) {
@@ -78,9 +92,12 @@ function initLoadLanguage (Prism) {
         return false
       })
       if (dependents.length) {
-        loadLanguages(dependents, true)
+        const results = await loadLanguages(dependents, true)
+        promises.push(...results)
       }
-    })
+    }
+
+    return Promise.all(promises)
   }
 }
 

src/muya/lib/selection/index.js

@@ -441,6 +441,7 @@ class Selection {
     let { anchorNode, anchorOffset, focusNode, focusOffset } = this.doc.getSelection()
     let startParagraph = findNearestParagraph(anchorNode)
     let endParagraph = findNearestParagraph(focusNode)
+
     if (!startParagraph || !endParagraph) {
       return {
         start: null,

src/muya/lib/utils/importMarkdown.js

@@ -104,6 +104,19 @@ const importRegister = ContentState => {
             const inputBlock = this.createBlock('span', lang)
             if (lang) {
               loadLanguage(lang)
+                .then(infoList => {
+                  if (!Array.isArray(infoList)) return
+                  // There are three status `loaded`, `noexist` and `cached`.
+                  // if the status is `loaded`, indicated that it's a new loaded language
+                  const needRender = infoList.some(({ status }) => status === 'loaded')
+                  if (needRender) {
+                    this.render()
+                  }
+                })
+                .catch(err => {
+                  // if no parameter provided, will cause error.
+                  console.warn(err)
+                })
             }
             inputBlock.functionType = 'languageInput'
             this.codeBlocks.set(block.key, value)

src/muya/themes/default.css

@@ -127,10 +127,10 @@ kbd {
 
 #ag-editor-id {
   max-width: var(--editorAreaWidth);
+  min-height: 100%;
   margin: 0 auto;
-  padding: 20px 50px 40px 50px;
+  padding: 20px 50px 100px 50px;
-  padding-top: 20px;
+  box-sizing: border-box;
-  padding-bottom: 100px;
 }
 
 #ag-editor-id, [contenteditable] {