fix: #926 summary element can not be click (#948)

src/muya/lib/assets/styles/index.css

@@ -6,7 +6,6 @@ pre {
   -webkit-font-smoothing: auto;
 }
 
-
 @keyframes highlight {
   from {
     transform: scale(1);
@@ -19,6 +18,10 @@ pre {
   }
 }
 
+#ag-editor-id summary {
+  outline: none;
+}
+
 div.ag-show-quick-insert-hint p.ag-paragraph.ag-active > span.ag-line:first-of-type:empty::after {
   content: 'Type @ to insert';
   color: var(--editorColor10);
@@ -261,6 +264,20 @@ figure {
   right: 0;
 }
 
+.ag-container-icon {
+  position: absolute;
+  top: 0px;
+  right: 10px;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  z-index: 2;
+  display: none;
+  opacity: 0;
+  transition: all .25s ease-in-out;
+}
+
+.ag-container-icon i.icon,
 .ag-front-icon i.icon,
 .ag-tool-bar ul li i.icon {
   display: inline-block;
@@ -273,6 +290,7 @@ figure {
   transition: all .25s ease-in-out;
 }
 
+.ag-container-icon i.icon > i[class^=icon-],
 .ag-front-icon i.icon > i[class^=icon-],
 .ag-tool-bar ul li i.icon > i[class^=icon-] {
   display: inline-block;
@@ -283,6 +301,12 @@ figure {
   left: -20px;
 }
 
+.ag-container-icon i.icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
 .ag-tool-bar ul li.active i.icon {
   color: var(--themeColor);
 }
@@ -296,6 +320,29 @@ figure.ag-active .ag-tool-bar {
   display: block;
 }
 
+figure.active .ag-container-icon {
+  display: none;
+}
+
+figure[data-role=SEQUENCE]:not(.ag-active):hover,
+figure[data-role=FLOWCHART]:not(.ag-active):hover,
+figure[data-role=VEGA-LITE]:not(.ag-active):hover,
+figure[data-role=MERMAID]:not(.ag-active):hover,
+figure[data-role=MULTIPLEMATH]:not(.ag-active):hover,
+figure[data-role=HTML]:not(.ag-active):hover {
+  background: linear-gradient(17deg, var(--editorBgColor) 36.65%, var(--editorColor04));
+}
+
+figure[data-role=SEQUENCE]:not(.ag-active):hover .ag-container-icon,
+figure[data-role=FLOWCHART]:not(.ag-active):hover .ag-container-icon,
+figure[data-role=VEGA-LITE]:not(.ag-active):hover .ag-container-icon,
+figure[data-role=MERMAID]:not(.ag-active):hover .ag-container-icon,
+figure[data-role=MULTIPLEMATH]:not(.ag-active):hover .ag-container-icon,
+figure[data-role=HTML]:not(.ag-active):hover .ag-container-icon {
+  opacity: 1;
+  display: block;
+}
+
 table {
   width: 100%;
   border-collapse: collapse;
@@ -467,11 +514,11 @@ pre.ag-fence-code > code::before {
   font-size: 12px;
 }
 
-pre.ag-fence-code > code::before {
+pre.ag-active.ag-fence-code > code::before {
   content: 'fence';
 }
 
-pre.ag-indent-code > code::before {
+pre.ag-active.ag-indent-code > code::before {
   content: 'indent';
 }
 
@@ -581,7 +628,6 @@ figure.ag-active.ag-container-block > div.ag-container-preview {
 }
 
 div.ag-html-preview {
-  pointer-events: none;
   width: 100%;
 }
 

src/muya/lib/config/index.js

@@ -72,6 +72,7 @@ export const CLASS_OR_ID = genUpper2LowerKeyHash([
   'AG_CODE_LINE_MINUS',
   'AG_CONTAINER_BLOCK',
   'AG_CONTAINER_PREVIEW',
+  'AG_CONTAINER_ICON',
   'AG_COPY_REMOVE',
   'AG_EDITOR_ID',
   'AG_EMOJI_MARKED_TEXT',

src/muya/lib/contentState/clickCtrl.js

@@ -106,8 +106,7 @@ const clickCtrl = ContentState => {
       const { formats } = this.selectionFormats()
       eventCenter.dispatch('muya-format-picker', { reference, formats })
     }
-    // bugfix: #67 problem 1
+
-    if (block && block.icon) return event.preventDefault()
     // bugfix: figure block click
     if (block.type === 'figure' && block.functionType === 'table') {
       // first cell in thead

src/muya/lib/eventHandler/clickEvent.js

@@ -70,20 +70,22 @@ class ClickEvent {
       } else if (rubyText) {
         selectionText(rubyText)
       }
+      if (target.closest('div.ag-container-preview') || target.closest('div.ag-html-preview')) {
+        return event.stopPropagation()
+      }
       // handler html preview click
-      const htmlPreview = target.closest(`.ag-function-html`)
+      const editIcon = target.closest(`.ag-container-icon`)
-      if (htmlPreview && !htmlPreview.classList.contains(CLASS_OR_ID['AG_ACTIVE'])) {
+      if (editIcon) {
         event.preventDefault()
         event.stopPropagation()
-        contentState.handleHtmlBlockClick(htmlPreview)
+        const nextElement = editIcon.nextElementSibling
-      }
+        if (nextElement && nextElement.classList.contains('ag-function-html')) {
-      // handler container block preview click
+          contentState.handleHtmlBlockClick(nextElement)
-      const container = target.closest('.ag-container-block')
+        } else if (editIcon.parentNode.classList.contains('ag-container-block')) {
-      if (container && !container.classList.contains(CLASS_OR_ID['AG_ACTIVE'])) {
+          contentState.handleContainerBlockClick(editIcon.parentNode)
-        event.preventDefault()
+        }
-        event.stopPropagation()
-        contentState.handleContainerBlockClick(container)
       }
+
       // handler to-do checkbox click
       if (target.tagName === 'INPUT' && target.classList.contains(CLASS_OR_ID['AG_TASK_LIST_ITEM_CHECKBOX'])) {
         contentState.listItemCheckBoxClick(target)

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

@@ -1,5 +1,6 @@
 import { CLASS_OR_ID } from '../../../config'
 import { renderTableTools } from './renderToolBar'
+import { renderEditIcon } from './renderContainerEditIcon'
 import { h } from '../snabbdom'
 
 const PRE_BLOCK_HASH = {
@@ -39,6 +40,8 @@ export default function renderContainerBlock (block, cursor, activeBlocks, selec
       Object.assign(data.dataset, { role: block.functionType.toUpperCase() })
       if (block.functionType === 'table') {
         children.unshift(renderTableTools(activeBlocks))
+      } else {
+        children.unshift(renderEditIcon())
       }
     }
 

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

@@ -0,0 +1,19 @@
+import { h } from '../snabbdom'
+import { CLASS_OR_ID } from '../../../config'
+import htmlIcon from '../../../assets/pngicon/html/2.png'
+
+export const renderEditIcon = () => {
+  const selector = `a.${CLASS_OR_ID['AG_CONTAINER_ICON']}`
+  const iconVnode = h('i.icon', h(`i.icon-inner`, {
+    style: {
+      background: `url(${htmlIcon}) no-repeat`,
+      'background-size': '100%'
+    }
+  }, ''))
+
+  return h(selector, {
+    attrs: {
+      contenteditable: 'false'
+    }
+  }, iconVnode)
+}