From 81a5c29dce7902521b69236ce9010e83db7d34e7 Mon Sep 17 00:00:00 2001 From: Rick Gove <63856101+RickGove@users.noreply.github.com> Date: Thu, 16 Sep 2021 22:26:02 +0300 Subject: [PATCH 1/8] Init click and drag to tool view divider --- packages/web/src/djitsu/layout/header.js | 2 +- .../react-tools/live-code/view-code.js | 3 +++ .../editorjs/tools/react-tool/tool-view.js | 23 +++++++++++++++++-- 3 files changed, 25 insertions(+), 3 deletions(-) diff --git a/packages/web/src/djitsu/layout/header.js b/packages/web/src/djitsu/layout/header.js index cde8ff3..41c89f0 100644 --- a/packages/web/src/djitsu/layout/header.js +++ b/packages/web/src/djitsu/layout/header.js @@ -15,7 +15,7 @@ const { Header: AntHeader } = Layout export const Header = () => { const [userState] = useUser() const history = useHistory() - console.log('history!', history) + // console.log('history!', history) const [theme] = useTheme() const displayItems = userState?.currentUsername ? ( <> diff --git a/packages/web/src/mods/editorjs/react-tools/live-code/view-code.js b/packages/web/src/mods/editorjs/react-tools/live-code/view-code.js index 82eb2d9..18aa1a5 100644 --- a/packages/web/src/mods/editorjs/react-tools/live-code/view-code.js +++ b/packages/web/src/mods/editorjs/react-tools/live-code/view-code.js @@ -459,6 +459,9 @@ export const ViewCode = (props) => { { const [tos, toa] = useTool() + console.log('🤯', { type, size, updateSize }) + useEffect(() => { const teardown = toa.setView(name, { label, @@ -29,8 +34,22 @@ export const ToolView = ({ const vf = tos.viewOptions[name] || {} const { hidden } = vf + const handleClick = (e) => { + if (!type === 'draggable') return + console.log('CLCIK', e) + } + + const handleDrag = (e) => { + if (!type === 'draggable') return + console.log('drag', e) + } + return ( - + {children} From d6314672922766246c8bd997faf39d2619a0f86d Mon Sep 17 00:00:00 2001 From: Rick Gove <63856101+RickGove@users.noreply.github.com> Date: Fri, 17 Sep 2021 00:06:02 +0300 Subject: [PATCH 2/8] Undo changes --- .../react-tools/live-code/view-code.js | 3 --- .../editorjs/tools/react-tool/tool-view.js | 23 ++----------------- 2 files changed, 2 insertions(+), 24 deletions(-) diff --git a/packages/web/src/mods/editorjs/react-tools/live-code/view-code.js b/packages/web/src/mods/editorjs/react-tools/live-code/view-code.js index 18aa1a5..82eb2d9 100644 --- a/packages/web/src/mods/editorjs/react-tools/live-code/view-code.js +++ b/packages/web/src/mods/editorjs/react-tools/live-code/view-code.js @@ -459,9 +459,6 @@ export const ViewCode = (props) => { { const [tos, toa] = useTool() - console.log('🤯', { type, size, updateSize }) - useEffect(() => { const teardown = toa.setView(name, { label, @@ -34,22 +29,8 @@ export const ToolView = ({ const vf = tos.viewOptions[name] || {} const { hidden } = vf - const handleClick = (e) => { - if (!type === 'draggable') return - console.log('CLCIK', e) - } - - const handleDrag = (e) => { - if (!type === 'draggable') return - console.log('drag', e) - } - return ( - + {children} From 463d8f0240ff1435c9bccb17964b9b0300e801e2 Mon Sep 17 00:00:00 2001 From: Rick Gove <63856101+RickGove@users.noreply.github.com> Date: Sat, 18 Sep 2021 11:46:38 +0200 Subject: [PATCH 3/8] View-code can now be resized via dragging the divider bar at the bottom of the block --- .../react-tools/live-code/view-code.js | 40 +++++++++++++++++++ .../editorjs/tools/react-tool/tool-view.js | 18 +++++++-- .../editorjs/tools/react-tool/view-meta.js | 1 + 3 files changed, 56 insertions(+), 3 deletions(-) diff --git a/packages/web/src/mods/editorjs/react-tools/live-code/view-code.js b/packages/web/src/mods/editorjs/react-tools/live-code/view-code.js index 82eb2d9..32a3d74 100644 --- a/packages/web/src/mods/editorjs/react-tools/live-code/view-code.js +++ b/packages/web/src/mods/editorjs/react-tools/live-code/view-code.js @@ -455,8 +455,34 @@ export const ViewCode = (props) => { clearPrompt() } + const [isDragging, setIsDragging] = useState(false) + const [initY, setInitY] = useState(0) + + const handleDragStart = (e) => { + setInitY(e.clientY) + setIsDragging(true) + } + + const handleDrag = (e) => { + if (!isDragging) return + if (editorHeight - (initY - e.clientY) > 140) + setEditorHeight(editorHeight - (initY - e.clientY)) + setInitY(e.clientY) + } + window.onmousemove = handleDrag + + const handleDragEnd = (e) => { + if (!isDragging) return + setIsDragging(false) + } + window.onmouseup = handleDragEnd + + const handleDoubleClick = () => { + setEditorHeight(375) + } return ( { ⚠️ line {annotations[0].row + 1}: {annotations[0].text} ) : null} + ) } export default ViewCode +const ResizeHandle = styled.div` + background: transparent; + width: 100%; + height: 2px; + position: relative; + top: 22px; + cursor: ns-resize; + z-index: 9999999; +` + const MonacoContainer = styled.div.attrs((props) => ({ props }))` height: ${(props) => props.height}; diff --git a/packages/web/src/mods/editorjs/tools/react-tool/tool-view.js b/packages/web/src/mods/editorjs/tools/react-tool/tool-view.js index a535b0d..29821bc 100644 --- a/packages/web/src/mods/editorjs/tools/react-tool/tool-view.js +++ b/packages/web/src/mods/editorjs/tools/react-tool/tool-view.js @@ -11,10 +11,13 @@ export const ToolView = ({ description, icon, children, - className + className, + onTop = false }) => { const [tos, toa] = useTool() + console.log('🍎', onTop) + useEffect(() => { const teardown = toa.setView(name, { label, @@ -30,12 +33,18 @@ export const ToolView = ({ const { hidden } = vf return ( - + {children} {label && ( - + {icon} {icon && <> } {label} @@ -76,6 +85,9 @@ const StyledToolView = styled.section` } } } + .on-top { + z-index: 9999999999999999999999999999999; + } ` export default ToolView diff --git a/packages/web/src/mods/editorjs/tools/react-tool/view-meta.js b/packages/web/src/mods/editorjs/tools/react-tool/view-meta.js index b620d0a..e907b2b 100644 --- a/packages/web/src/mods/editorjs/tools/react-tool/view-meta.js +++ b/packages/web/src/mods/editorjs/tools/react-tool/view-meta.js @@ -71,6 +71,7 @@ const Divi = styled(Divider)` transition: all 90ms ease-in; > .ant-divider-inner-text { + z-index: 9999999999999999999; align-items: center; display: flex; font-size: 11px; From dc09fe4d4c0ea718d5a68a97dfdaafd8af91554b Mon Sep 17 00:00:00 2001 From: Rick Gove <63856101+RickGove@users.noreply.github.com> Date: Sun, 19 Sep 2021 06:06:01 -0600 Subject: [PATCH 4/8] Adjust max height, remove console log --- .../editorjs/react-tools/live-code/view-code.js | 13 +++++++++---- .../src/mods/editorjs/tools/react-tool/tool-view.js | 2 -- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/web/src/mods/editorjs/react-tools/live-code/view-code.js b/packages/web/src/mods/editorjs/react-tools/live-code/view-code.js index 32a3d74..9e1be66 100644 --- a/packages/web/src/mods/editorjs/react-tools/live-code/view-code.js +++ b/packages/web/src/mods/editorjs/react-tools/live-code/view-code.js @@ -49,16 +49,21 @@ export const ViewCode = (props) => { const container = useRef() const modalInputRef = useRef() - useEffect(() => { + const resizeBasedOnLines = () => { const lines = codeInput.split(/\r\n|\r|\n/).length const lineHeight = 13 const minLines = 4 - const maxLines = 30 + const maxLines = 20 if (lines < minLines) setEditorHeight(minLines * lineHeight) else if (lines > maxLines) setEditorHeight(maxLines * lineHeight) else setEditorHeight(lines * lineHeight) editor.current ? editor.current.layout() : null - }, [codeInput]) + } + + useEffect(() => { + if (!monaco) return + resizeBasedOnLines() + }, [codeInput, monaco]) const suggestClosingTags = () => { monaco.languages.registerCompletionItemProvider('javascript', { @@ -478,7 +483,7 @@ export const ViewCode = (props) => { window.onmouseup = handleDragEnd const handleDoubleClick = () => { - setEditorHeight(375) + resizeBasedOnLines() } return ( { const [tos, toa] = useTool() - console.log('🍎', onTop) - useEffect(() => { const teardown = toa.setView(name, { label, From 2ee680e39d0db6c9ee0851057957eb2d1185402e Mon Sep 17 00:00:00 2001 From: Rick Gove <63856101+RickGove@users.noreply.github.com> Date: Sun, 19 Sep 2021 06:07:22 -0600 Subject: [PATCH 5/8] Add history console log back --- packages/web/src/djitsu/layout/header.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/src/djitsu/layout/header.js b/packages/web/src/djitsu/layout/header.js index 41c89f0..cde8ff3 100644 --- a/packages/web/src/djitsu/layout/header.js +++ b/packages/web/src/djitsu/layout/header.js @@ -15,7 +15,7 @@ const { Header: AntHeader } = Layout export const Header = () => { const [userState] = useUser() const history = useHistory() - // console.log('history!', history) + console.log('history!', history) const [theme] = useTheme() const displayItems = userState?.currentUsername ? ( <> From b3847feebfd13d8ce8744ba6fadc5d5dbc3ac8b6 Mon Sep 17 00:00:00 2001 From: Rick Gove <63856101+RickGove@users.noreply.github.com> Date: Sun, 19 Sep 2021 06:12:12 -0600 Subject: [PATCH 6/8] Remove on-top prop as not needed --- .../src/mods/editorjs/tools/react-tool/tool-view.js | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/packages/web/src/mods/editorjs/tools/react-tool/tool-view.js b/packages/web/src/mods/editorjs/tools/react-tool/tool-view.js index 24705ec..e5c7aff 100644 --- a/packages/web/src/mods/editorjs/tools/react-tool/tool-view.js +++ b/packages/web/src/mods/editorjs/tools/react-tool/tool-view.js @@ -11,8 +11,7 @@ export const ToolView = ({ description, icon, children, - className, - onTop = false + className }) => { const [tos, toa] = useTool() @@ -31,18 +30,12 @@ export const ToolView = ({ const { hidden } = vf return ( - + {children} {label && ( - + {icon} {icon && <> } {label} From 64fcf5c98302ad40b03d6da7837969b3c6de413d Mon Sep 17 00:00:00 2001 From: Rick Gove <63856101+RickGove@users.noreply.github.com> Date: Sun, 19 Sep 2021 06:13:32 -0600 Subject: [PATCH 7/8] remove unused css class def --- packages/web/src/mods/editorjs/tools/react-tool/tool-view.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/web/src/mods/editorjs/tools/react-tool/tool-view.js b/packages/web/src/mods/editorjs/tools/react-tool/tool-view.js index e5c7aff..a535b0d 100644 --- a/packages/web/src/mods/editorjs/tools/react-tool/tool-view.js +++ b/packages/web/src/mods/editorjs/tools/react-tool/tool-view.js @@ -76,9 +76,6 @@ const StyledToolView = styled.section` } } } - .on-top { - z-index: 9999999999999999999999999999999; - } ` export default ToolView From 14ccd43b2c56fbe549bbd1c121c9068a94d1a382 Mon Sep 17 00:00:00 2001 From: Rick Gove <63856101+RickGove@users.noreply.github.com> Date: Sun, 19 Sep 2021 06:15:39 -0600 Subject: [PATCH 8/8] remove unused check for monaco --- .../web/src/mods/editorjs/react-tools/live-code/view-code.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/web/src/mods/editorjs/react-tools/live-code/view-code.js b/packages/web/src/mods/editorjs/react-tools/live-code/view-code.js index 9e1be66..3aa83b6 100644 --- a/packages/web/src/mods/editorjs/react-tools/live-code/view-code.js +++ b/packages/web/src/mods/editorjs/react-tools/live-code/view-code.js @@ -61,7 +61,6 @@ export const ViewCode = (props) => { } useEffect(() => { - if (!monaco) return resizeBasedOnLines() }, [codeInput, monaco])