From 0bc96c2436757ad54222fe14e62b5a0ae52d489d Mon Sep 17 00:00:00 2001 From: Ran Luo Date: Mon, 15 Apr 2019 23:25:34 +0800 Subject: [PATCH] fix: #926 summary element can not be click (#948) --- src/muya/lib/assets/styles/index.css | 54 +++++++++++++++++-- src/muya/lib/config/index.js | 1 + src/muya/lib/contentState/clickCtrl.js | 3 +- src/muya/lib/eventHandler/clickEvent.js | 22 ++++---- .../renderBlock/renderContainerBlock.js | 3 ++ .../renderBlock/renderContainerEditIcon.js | 19 +++++++ 6 files changed, 86 insertions(+), 16 deletions(-) create mode 100644 src/muya/lib/parser/render/renderBlock/renderContainerEditIcon.js diff --git a/src/muya/lib/assets/styles/index.css b/src/muya/lib/assets/styles/index.css index 639147a3..661325fd 100644 --- a/src/muya/lib/assets/styles/index.css +++ b/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%; } diff --git a/src/muya/lib/config/index.js b/src/muya/lib/config/index.js index 17754f79..4bebbeab 100644 --- a/src/muya/lib/config/index.js +++ b/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', diff --git a/src/muya/lib/contentState/clickCtrl.js b/src/muya/lib/contentState/clickCtrl.js index 37fc5987..40253a3e 100644 --- a/src/muya/lib/contentState/clickCtrl.js +++ b/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 diff --git a/src/muya/lib/eventHandler/clickEvent.js b/src/muya/lib/eventHandler/clickEvent.js index 2177c709..846d7a6b 100644 --- a/src/muya/lib/eventHandler/clickEvent.js +++ b/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`) - if (htmlPreview && !htmlPreview.classList.contains(CLASS_OR_ID['AG_ACTIVE'])) { + const editIcon = target.closest(`.ag-container-icon`) + if (editIcon) { event.preventDefault() event.stopPropagation() - contentState.handleHtmlBlockClick(htmlPreview) - } - // handler container block preview click - const container = target.closest('.ag-container-block') - if (container && !container.classList.contains(CLASS_OR_ID['AG_ACTIVE'])) { - event.preventDefault() - event.stopPropagation() - contentState.handleContainerBlockClick(container) + const nextElement = editIcon.nextElementSibling + if (nextElement && nextElement.classList.contains('ag-function-html')) { + contentState.handleHtmlBlockClick(nextElement) + } else if (editIcon.parentNode.classList.contains('ag-container-block')) { + contentState.handleContainerBlockClick(editIcon.parentNode) + } } + // handler to-do checkbox click if (target.tagName === 'INPUT' && target.classList.contains(CLASS_OR_ID['AG_TASK_LIST_ITEM_CHECKBOX'])) { contentState.listItemCheckBoxClick(target) diff --git a/src/muya/lib/parser/render/renderBlock/renderContainerBlock.js b/src/muya/lib/parser/render/renderBlock/renderContainerBlock.js index ec468ec5..f7335725 100644 --- a/src/muya/lib/parser/render/renderBlock/renderContainerBlock.js +++ b/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()) } } diff --git a/src/muya/lib/parser/render/renderBlock/renderContainerEditIcon.js b/src/muya/lib/parser/render/renderBlock/renderContainerEditIcon.js new file mode 100644 index 00000000..30ffdad1 --- /dev/null +++ b/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) +}