@@ -271,7 +260,7 @@ export default function NavigatorPanel(props: NavigatorPanelProps) {
<>
{/* workspace */}
{/* <>
-
+
*/}
@@ -280,12 +269,10 @@ export default function NavigatorPanel(props: NavigatorPanelProps) {
{/* project */}
<>
- folder
+ {/* 
*/}
+ {/* } */}
{project.name}
@@ -311,7 +298,7 @@ export default function NavigatorPanel(props: NavigatorPanelProps) {
<>
{/* workspace */}
{/* <>
-
- {favicon === null || favicon === "" || faviconFallback ?
- folder :
-
- }
-
+ {/* {favicon === null || favicon === "" || faviconFallback ? */}
+
+
*/}
@@ -320,7 +307,7 @@ export default function NavigatorPanel(props: NavigatorPanelProps) {
<>
{/* workspace */}
{/* <>
-
+
@@ -329,12 +316,12 @@ export default function NavigatorPanel(props: NavigatorPanelProps) {
{/* project */}
<>
- folder
+ {/* */}
+ {/* } */}
+
{project.name}
@@ -381,7 +368,7 @@ export default function NavigatorPanel(props: NavigatorPanelProps) {
onOpenProject(_project)
}}>
- {favicon === null || favicon === "" || faviconFallback ?
- folder :
-
- }
-
+
+ {/* {favicon === null || favicon === "" || faviconFallback ? */}
+
-
+ (false)
return useMemo(() => {
@@ -754,6 +810,10 @@ export default function NodeTreeView(props: NodeTreeViewProps) {
navigatorDropDownType !== null && setNavigatorDropDownType(null)
}}
+ onDoubleClick={(e: React.MouseEvent) => {
+ e.stopPropagation()
+ openWebComponent(props.item.index as TNodeUid)
+ }}
onMouseEnter={(e) => {
const ele = e.target as HTMLElement
let _uid: TNodeUid | null = ele.getAttribute('id')
diff --git a/src/components/main/actionsPanel/workspaceTreeView/WorkspaceTreeView.tsx b/src/components/main/actionsPanel/workspaceTreeView/WorkspaceTreeView.tsx
index 85669b89..79a232c0 100644
--- a/src/components/main/actionsPanel/workspaceTreeView/WorkspaceTreeView.tsx
+++ b/src/components/main/actionsPanel/workspaceTreeView/WorkspaceTreeView.tsx
@@ -1937,7 +1937,7 @@ export default function WorkspaceTreeView(props: WorkspaceTreeViewProps) {
...(navigatorDropDownType ? { zIndex: 2 } : {})
}}
- className={navigatorDropDownType ? 'border-left border-right border-bottom shadow background-primary' : ''}
+ className={navigatorDropDownType ? 'border-bottom background-primary' : ''}
onClick={onPanelClick}
>
(true)
+ const currentPosition = useRef(null)
const monacoRef = useRef(null)
const editorWrapperRef = useRef(null)
const codeContent = useRef('')
@@ -108,40 +112,66 @@ export default function CodeView(props: CodeViewProps) {
const decorationCollectionRef = useRef()
const codeChangeDecorationRef = useRef>(new Map())
const validNodeTreeRef = useRef({})
+ const noNeedClosingTag = ['area',
+ 'base',
+ 'br',
+ 'col',
+ 'embed',
+ 'hr',
+ 'img',
+ 'input',
+ 'link',
+ 'meta',
+ 'param',
+ 'source',
+ 'track',
+ 'wbr']
const handleEditorDidMount = useCallback((editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => {
monacoRef.current = editor
+ editor.onDidChangeCursorPosition((event) => {
+ setTimeout(() => {
+ if (event.reason === 2) {
+ currentPosition.current && monacoRef.current?.setPosition(currentPosition.current)
+ }
+ }, 0);
+ })
decorationCollectionRef.current = editor.createDecorationsCollection()
// setTimeout(function() {
// editor?.getAction('editor.action.formatDocument')?.run();
// }, 300);
- }, [])
- // -------------------------------------------------------------- sync --------------------------------------------------------------
- // build node tree refernece
- useEffect(() => {
- validNodeTreeRef.current = JSON.parse(JSON.stringify(validNodeTree))
-
- // set new focused node
- if (newFocusedNodeUid !== '') {
- setFocusedNode(validNodeTree[newFocusedNodeUid])
- !isFirst.current ? focusedItemRef.current = newFocusedNodeUid : null
- setNewFocusedNodeUid('')
- }
- }, [validNodeTree])
- // file content change - set code
- useEffect(() => {
- const _file = ffTree[file.uid]
- if (!_file) return
-
- if (updateOpt.from === 'code') return
-
- const fileData = _file.data as TFileNodeData
- setLanguage(fileData.ext === '.html' ? 'html' : fileData.ext === '.md' ? 'markdown' : fileData.ext === '.js' ? 'javascript' : fileData.ext === '.css' ? 'css' : fileData.type)
- codeContent.current = fileData.content
+ }, [])
+ // -------------------------------------------------------------- sync --------------------------------------------------------------
+ // build node tree refernece
+ useEffect(() => {
+ validNodeTreeRef.current = JSON.parse(JSON.stringify(validNodeTree))
+
+ // set new focused node
+ if (newFocusedNodeUid !== '') {
+ setFocusedNode(validNodeTree[newFocusedNodeUid])
+ !isFirst.current ? focusedItemRef.current = newFocusedNodeUid : null
+ setNewFocusedNodeUid('')
+ }
+ }, [validNodeTree])
+ // file content change - set code
+ useEffect(() => {
+ const _file = ffTree[file.uid]
+ if (!_file) return
+
+ if (updateOpt.from === 'code') return
+
+ const fileData = _file.data as TFileNodeData
+ setLanguage(fileData.ext === '.html' ? 'html' : fileData.ext === '.md' ? 'markdown' : fileData.ext === '.js' ? 'javascript' : fileData.ext === '.css' ? 'css' : fileData.type)
+ codeContent.current = fileData.content
}, [ffTree[file.uid]])
// focusedItem - code select
const focusedItemRef = useRef('')
const revealed = useRef(false)
useEffect(() => {
+ if (!parseFileFlag) {
+ return
+ }
+ // console.log(currentPosition.current, focusedItem)
+ // currentPosition.current && !monacoRef.current?.getPosition()?.equals(currentPosition.current) && monacoRef.current?.setPosition(currentPosition.current)
if (focusedItem === RootNodeUid || focusedItemRef.current === focusedItem) return
if (!validNodeTree[focusedItem]) return
@@ -186,11 +216,12 @@ export default function CodeView(props: CodeViewProps) {
}
focusedItemRef.current = focusedItem
- }, [focusedItem])
+ }, [focusedItem, parseFileFlag])
// watch focus/selection for the editor
const firstSelection = useRef(null)
const [selection, setSelection] = useState(null)
const updateSelection = useCallback(() => {
+ if (!parseFileFlag) return
const _selection = monacoRef.current?.getSelection()
if (_selection) {
if (isFirst.current) {
@@ -211,10 +242,18 @@ export default function CodeView(props: CodeViewProps) {
})
}
}
+ // else if(activePanel === 'code' && firstSelection.current && currentPosition.current){
+ // setSelection({
+ // startLineNumber: currentPosition.current.lineNumber,
+ // startColumn: currentPosition.current?.column,
+ // endLineNumber: currentPosition.current?.lineNumber,
+ // endColumn: currentPosition.current?.column,
+ // })
+ // }
} else {
setSelection(null)
}
- }, [selection])
+ }, [selection, parseFileFlag])
useEffect(() => {
const cursorDetectInterval = setInterval(() => updateSelection(), 0)
return () => clearInterval(cursorDetectInterval)
@@ -293,6 +332,7 @@ export default function CodeView(props: CodeViewProps) {
const reduxTimeout = useRef(null)
const isAttrEditing = useRef(false)
const saveFileContentToRedux = useCallback(() => {
+ setActivePanel('code')
if (parseFileFlag) {
// clear highlight
decorationCollectionRef.current?.clear()
@@ -312,10 +352,13 @@ export default function CodeView(props: CodeViewProps) {
const currentCode = codeContent.current
const currentCodeArr = currentCode.split(getLineBreaker(osType))
const codeChanges: TCodeChange[] = []
+ let hasMismatchedTags = false
+
for (const codeChange of codeChangeDecorationRef.current.entries()) {
let uid = codeChange[0]
// check if editing tags are
{_project.favicon ? 
: folder }
{_project.name}
diff --git a/src/components/main/actionsPanel/nodeTreeView/NodeTreeView.tsx b/src/components/main/actionsPanel/nodeTreeView/NodeTreeView.tsx
index f8711350..ba0a634a 100644
--- a/src/components/main/actionsPanel/nodeTreeView/NodeTreeView.tsx
+++ b/src/components/main/actionsPanel/nodeTreeView/NodeTreeView.tsx
@@ -45,6 +45,7 @@ import {
} from '@_node/types';
import {
collapseFNNode,
+ expandFFNode,
expandFNNode,
fnSelector,
focusFNNode,
@@ -86,6 +87,7 @@ export default function NodeTreeView(props: NodeTreeViewProps) {
ffHandlers, setFFHandlers,
ffHoveredItem, setFFHoveredItem,
isHms, setIsHms,
+ setInitialFileToOpen,
ffAction, setFFAction,
currentFileUid, setCurrentFileUid,
// node tree view
@@ -656,6 +658,60 @@ export default function NodeTreeView(props: NodeTreeViewProps) {
navigatorDropDownType !== null && setNavigatorDropDownType(null)
}, [navigatorDropDownType])
+ // ------------------------------------------------------------- open wc -------------------------------------------------------------
+ const openWebComponent = useCallback((item: TNodeUid) => {
+ // check the element is wc
+ const nodeData = validNodeTree[item].data as THtmlNodeData
+ let exist = false
+ if (nodeData && htmlReferenceData.elements[nodeData.name] === undefined && nodeData.type === 'tag') {
+ const wcName = nodeData.name
+ for (let x in ffTree) {
+ const defineRegex = /customElements\.define\(\s*['"]([\w-]+)['"]/;
+ if ((ffTree[x].data as TFileNodeData).content && (ffTree[x].data as TFileNodeData).ext === '.js') {
+ const match = ((ffTree[x].data as TFileNodeData).content).match(defineRegex);
+ if (match) {
+ // check web component
+ if (wcName === match[1].toLowerCase()) {
+ const fileName = (ffTree[x].data as TFileNodeData).name
+ let src = ''
+ for (let i in validNodeTree) {
+ if ((validNodeTree[i].data as THtmlNodeData).type === 'script' && (validNodeTree[i].data as THtmlNodeData).html.search(fileName + '.js') !== -1) {
+ src = (validNodeTree[i].data as THtmlNodeData).attribs.src
+ break
+ }
+ }
+ if (src !== '') {
+ if (src.startsWith('http') || src.startsWith('//')) {
+ alert('rnbw couldn\'t find it\'s source file')
+ break
+ }
+ else{
+ setInitialFileToOpen(ffTree[x].uid)
+ setNavigatorDropDownType('project')
+ // expand path to the uid
+ const _expandedItems: string[] = []
+ let _file = ffTree[x]
+ while (_file && _file.uid !== RootNodeUid) {
+ _file = ffTree[_file.parentUid as string]
+ if (_file && !_file.isEntity && (!expandedItemsObj[_file.uid] || expandedItemsObj[_file.uid] === undefined))
+ _expandedItems.push(_file.uid)
+ }
+ dispatch(expandFFNode(_expandedItems))
+ exist = true
+ break
+ }
+ }
+ }
+ }
+ }
+ }
+
+ if (!exist) {
+ alert('rnbw couldn\'t find it\'s source file')
+ }
+ }
+ }, [htmlReferenceData, validNodeTree, ffTree])
+
const isDragging = useRef or
let _parent = uid
+ if (validNodeTree[uid] === undefined) return
let notParsingFlag = validNodeTree[uid].name === 'code' || validNodeTree[uid].name === 'pre' ? true : false
while(_parent !== undefined && _parent !== null && _parent !== 'ROOT') {
if (validNodeTree[_parent].name === 'code' || validNodeTree[_parent].name === 'pre') {
@@ -341,40 +384,58 @@ export default function CodeView(props: CodeViewProps) {
endLineNumber > startLineNumber && partCodeArr.push(currentCodeArr[endLineNumber - 1].slice(0, endColumn - 1))
const content = partCodeArr.join(getLineBreaker(osType))
- // console.log(validNodeTree[uid].data, (validNodeTree[uid].data as THtmlNodeData).html, content)
uid = notParsingFlag ? _parent : uid
- codeChanges.push({ uid , content })
+ const parsedHtml = ReactHtmlParser(codeContent.current);
+ let htmlSkeletonStructureCount = 0
+ for(let x in parsedHtml) {
+ if (parsedHtml[x] && parsedHtml[x]?.type === 'html') {
+ if (parsedHtml[x].props.children) {
+ for (let i in parsedHtml[x].props.children) {
+ if (parsedHtml[x].props.children[i] && parsedHtml[x].props.children[i].type && (parsedHtml[x].props.children[i].type === 'body' || parsedHtml[x].props.children[i].type === 'head'))
+ htmlSkeletonStructureCount ++
+ }
+ }
+ }
+ }
+ if (htmlSkeletonStructureCount >= 2) {
+
+ hasMismatchedTags = checkValidHtml(codeContent.current)
+
+ if (hasMismatchedTags === false) codeChanges.push({ uid , content })
+ }
+ else{
+ console.log("Can't remove this element because it's an unique element of this page")
+ }
+ }
+
+ if (hasMismatchedTags === false) {
+ setCodeChanges(codeChanges)
+
+ // update
+ dispatch(setCurrentFileContent(codeContent.current))
+ addRunningActions(['processor-updateOpt'])
+ setUpdateOpt({ parse: true, from: 'code' })
+
+ codeChangeDecorationRef.current.clear()
+ reduxTimeout.current = null
+ setFocusedNode(undefined)
+ }
+ else{
+ // update
+ dispatch(setCurrentFileContent(codeContent.current))
+ setFSPending(false)
+ const _file = JSON.parse(JSON.stringify(ffTree[file.uid])) as TNode
+ addRunningActions(['processor-updateOpt'])
+ const fileData = _file.data as TFileNodeData
+ (ffTree[file.uid].data as TFileNodeData).content = codeContent.current;
+ (ffTree[file.uid].data as TFileNodeData).contentInApp = codeContent.current;
+ (ffTree[file.uid].data as TFileNodeData).changed = codeContent.current !== fileData.orgContent;
+ setFFTree(ffTree)
+ dispatch(setCurrentFileContent(codeContent.current))
+ codeChangeDecorationRef.current.clear()
+ setCodeEditing(false)
+ setFSPending(false)
}
- // const preview = document.getElementById('codeview_change_preview')
- // let dom = new DOMParser().parseFromString(codeContent.current, 'text/html');
- // let flag = true
- // if (preview) {
- // preview.innerHTML = ''
- // for (let x in codeChanges){
- // preview.innerHTML = ''
- // let prev_content = ''
- // if (validNodeTree[codeChanges[0].uid].name === 'body' || validNodeTree[codeChanges[0].uid].name === 'head' || validNodeTree[codeChanges[0].uid].name === 'html') {
- // continue
- // }
- // preview.innerHTML = codeChanges[x].content
- // if (codeChanges[x].content !== preview.innerHTML) {
- // flag = false
- // }
- // }
- // console.log(codeChanges[0].content, preview.innerHTML, flag)
- // }
- // if (!flag) return
- // check attr editing
- setCodeChanges(codeChanges)
-
- // update
- dispatch(setCurrentFileContent(codeContent.current))
- addRunningActions(['processor-updateOpt'])
- setUpdateOpt({ parse: true, from: 'code' })
-
- codeChangeDecorationRef.current.clear()
- reduxTimeout.current = null
- setFocusedNode(undefined)
}
else {
// non-parse file save
@@ -385,13 +446,14 @@ export default function CodeView(props: CodeViewProps) {
(ffTree[file.uid].data as TFileNodeData).contentInApp = codeContent.current;
(ffTree[file.uid].data as TFileNodeData).changed = codeContent.current !== fileData.orgContent;
setFFTree(ffTree)
- setUpdateOpt({ parse: true, from: 'code' })
+ dispatch(setCurrentFileContent(codeContent.current))
codeChangeDecorationRef.current.clear()
setCodeEditing(false)
+ setFSPending(false)
}
- }, [ffTree, file.uid, validNodeTree, osType])
+ }, [ffTree, file.uid, validNodeTree, osType, parseFileFlag])
const handleEditorChange = useCallback((value: string | undefined, ev: monaco.editor.IModelContentChangedEvent) => {
- let delay = 300
+ let delay = 500
if (parseFileFlag){
const hasFocus = monacoRef.current?.hasTextFocus()
@@ -402,7 +464,7 @@ export default function CodeView(props: CodeViewProps) {
// get changed part
const { eol } = ev
const { range: o_range, text: changedCode } = ev.changes[0]
- if ((changedCode === "<" || changedCode === " " || changedCode === "=" || changedCode === '"' || changedCode === '""' || changedCode === "''" || changedCode === "'" || changedCode.search('=""') !== -1) && parseFileFlag) {
+ if ((changedCode === " " || changedCode === "=" || changedCode === '"' || changedCode === '""' || changedCode === "''" || changedCode === "'" || changedCode.search('=""') !== -1) && parseFileFlag) {
delay = 5000
}
else {
@@ -477,36 +539,44 @@ export default function CodeView(props: CodeViewProps) {
}
// update decorations
- const focusedNodeDecorations: monaco.editor.IModelDeltaDecoration[] = []
- const focusedNodeCodeRange: monaco.IRange = validNodeTreeRef.current[focusedNode.uid].data as THtmlNodeData
- if (!completelyRemoved) {
- focusedNodeDecorations.push(
- {
- range: focusedNodeCodeRange,
- options: {
- isWholeLine: true,
- className: 'focusedNodeCode',
- }
- },
- )
- }
- codeChangeDecorationRef.current.set(focusedNode.uid, focusedNodeDecorations)
-
- // render decorations
- const decorationsList = codeChangeDecorationRef.current.values()
- const wholeDecorations: monaco.editor.IModelDeltaDecoration[] = []
- for (const decorations of decorationsList) {
- wholeDecorations.push(...decorations)
+ if (validNodeTreeRef.current[focusedNode.uid] ) {
+ const focusedNodeDecorations: monaco.editor.IModelDeltaDecoration[] = []
+ const focusedNodeCodeRange: monaco.IRange = validNodeTreeRef.current[focusedNode.uid].data as THtmlNodeData
+ if (!completelyRemoved) {
+ focusedNodeDecorations.push(
+ {
+ range: focusedNodeCodeRange,
+ options: {
+ isWholeLine: true,
+ className: 'focusedNodeCode',
+ }
+ },
+ )
+ }
+ codeChangeDecorationRef.current.set(focusedNode.uid, focusedNodeDecorations)
+
+ // render decorations
+ const decorationsList = codeChangeDecorationRef.current.values()
+ const wholeDecorations: monaco.editor.IModelDeltaDecoration[] = []
+ for (const decorations of decorationsList) {
+ wholeDecorations.push(...decorations)
+ }
+ decorationCollectionRef.current?.set(wholeDecorations)
+
}
- decorationCollectionRef.current?.set(wholeDecorations)
}
// update redux with debounce
codeContent.current = value || ''
+ const newPosition = monacoRef.current?.getPosition();
+ if (newPosition !== undefined) {
+ currentPosition.current = newPosition
+ }
reduxTimeout.current !== null && clearTimeout(reduxTimeout.current)
reduxTimeout.current = setTimeout(saveFileContentToRedux, delay)
setCodeEditing(true)
- }, [saveFileContentToRedux, focusedNode, activePanel])
+
+ }, [saveFileContentToRedux, focusedNode, parseFileFlag])
// -------------------------------------------------------------- monaco-editor options --------------------------------------------------------------
// tabSize
const [_tabSize, _setTabSize] = useState(DefaultTabSize)
@@ -613,7 +683,7 @@ export default function CodeView(props: CodeViewProps) {
height: '23px',
cursor: 'move',
paddingTop: '5px',
- paddingLeft: '10px'
+ paddingLeft: '12px'
}}
>
list
diff --git a/src/components/main/process/Process.tsx b/src/components/main/process/Process.tsx
index d6d1ae96..22d704bc 100644
--- a/src/components/main/process/Process.tsx
+++ b/src/components/main/process/Process.tsx
@@ -79,6 +79,7 @@ export default function Process(props: ProcessProps) {
ffHandlers, setFFHandlers,
ffHoveredItem, setFFHoveredItem,
isHms, setIsHms,
+ parseFileFlag,
ffAction, setFFAction,
currentFileUid, setCurrentFileUid,
// node tree view
@@ -121,6 +122,7 @@ export default function Process(props: ProcessProps) {
window.document.title = RainbowAppName
} else {
const _file = ffTree[file.uid]
+ if (!_file) return
const fileData = _file.data as TFileNodeData
if (ffTree[file.uid].data.type === 'html') {
let _title = `${fileData.name}${fileData.ext}`
@@ -140,7 +142,7 @@ export default function Process(props: ProcessProps) {
window.document.title = `${fileData.name}${fileData.ext}`
}
}
- }, [file.uid, nodeTree])
+ }, [file.uid, nodeTree, ffTree])
// processor-updateOpt
useEffect(() => {
if (updateOpt.parse === true) {
@@ -246,10 +248,12 @@ export default function Process(props: ProcessProps) {
// add new nodes / get valid node's uid list for iframe
const uids = getSubNodeUidsByBfs(RootNodeUid, tree, false)
const nodeUids: TNodeUid[] = []
+ let _flag = false
uids.map(uid => {
const node = tree[uid]
if (node.parentUid === RootNodeUid) {
- _newFocusedNodeUid = uid
+ !_flag && (_newFocusedNodeUid = uid)
+ _flag = true
node.parentUid = o_parentNode.uid
}
_nodeTree[uid] = JSON.parse(JSON.stringify(node))
@@ -544,7 +548,7 @@ export default function Process(props: ProcessProps) {
}
removeRunningActions(['processor-updateOpt'])
- }, [updateOpt])
+ }, [updateOpt, parseFileFlag])
// processor-nodeTree
useEffect(() => {
if (!nodeTree[RootNodeUid]) return
diff --git a/src/components/main/stageView/StageView.tsx b/src/components/main/stageView/StageView.tsx
index 2c62b1ac..40aafe6d 100644
--- a/src/components/main/stageView/StageView.tsx
+++ b/src/components/main/stageView/StageView.tsx
@@ -20,12 +20,7 @@ export default function StageView(props: StageViewProps) {
return <>
diff --git a/src/components/main/stageView/iFrame/IFrame.tsx b/src/components/main/stageView/iFrame/IFrame.tsx
index e6e3e5f0..39562ced 100644
--- a/src/components/main/stageView/iFrame/IFrame.tsx
+++ b/src/components/main/stageView/iFrame/IFrame.tsx
@@ -26,7 +26,9 @@ import {
TNodeUid,
} from '@_node/types';
import {
+ expandFFNode,
expandFNNode,
+ ffSelector,
fnSelector,
focusFNNode,
MainContext,
@@ -52,7 +54,8 @@ export const IFrame = (props: IFrameProps) => {
const dispatch = useDispatch()
const { file } = useSelector(navigatorSelector)
// -------------------------------------------------------------- global state --------------------------------------------------------------
- const { focusedItem, expandedItems, expandedItemsObj, selectedItems, selectedItemsObj } = useSelector(fnSelector)
+ const { focusedItem, expandedItems, selectedItems, selectedItemsObj } = useSelector(fnSelector)
+ const { expandedItemsObj } = useSelector(ffSelector)
const {
// global action
addRunningActions, removeRunningActions,
@@ -141,7 +144,7 @@ export const IFrame = (props: IFrameProps) => {
const elementRect = (newFocusedElement as HTMLElement)?.getBoundingClientRect()
if (elementRect) {
if (elementRect.y < 0) {
- setCodeViewOffsetTop('calc(66.67vh - 10px)')
+ setCodeViewOffsetTop('calc(66.66vh - 12px)')
}
else {
const innerHeight = contentRef?.contentWindow?.document.documentElement.clientHeight
@@ -149,10 +152,10 @@ export const IFrame = (props: IFrameProps) => {
if (innerHeight) {
if (elementRect.height < innerHeight / 2) {
if (elePosition / innerHeight * 100 > 66) {
- setCodeViewOffsetTop('10px')
+ setCodeViewOffsetTop('12px')
}
if (elePosition / innerHeight * 100 < 33) {
- setCodeViewOffsetTop('calc(66.67vh - 10px)')
+ setCodeViewOffsetTop('calc(66.66vh - 12px)')
}
}
}
@@ -169,7 +172,7 @@ export const IFrame = (props: IFrameProps) => {
setTimeout(() => newFocusedElement?.scrollIntoView({ block: 'nearest', inline: 'start', behavior: 'smooth' }), 50)
if (elementRect) {
if (elementRect.y < 0) {
- setCodeViewOffsetTop('calc(66.67vh - 10px)')
+ setCodeViewOffsetTop('calc(66.66vh - 12px)')
}
else {
const innerHeight = contentRef?.contentWindow?.document.documentElement.clientHeight
@@ -177,10 +180,10 @@ export const IFrame = (props: IFrameProps) => {
if (innerHeight) {
if (elementRect.height < innerHeight / 2) {
if (elePosition / innerHeight * 100 > 66) {
- setCodeViewOffsetTop('10px')
+ setCodeViewOffsetTop('12px')
}
if (elePosition / innerHeight * 100 < 33) {
- setCodeViewOffsetTop('calc(66.67vh - 10px)')
+ setCodeViewOffsetTop('calc(66.66vh - 12px)')
}
}
}
@@ -247,7 +250,7 @@ export const IFrame = (props: IFrameProps) => {
setTimeout(() => newFocusedElement?.scrollIntoView({ block: 'nearest', inline: 'start', behavior: 'smooth' }), 50)
if (elementRect) {
if (elementRect.y < 0) {
- setCodeViewOffsetTop('calc(66.67vh - 10px)')
+ setCodeViewOffsetTop('calc(66.66vh - 12px)')
}
else {
const innerHeight = contentRef?.contentWindow?.document.documentElement.clientHeight
@@ -255,10 +258,10 @@ export const IFrame = (props: IFrameProps) => {
if (innerHeight) {
if (elementRect.height < innerHeight / 2) {
if (elePosition / innerHeight * 100 > 66) {
- setCodeViewOffsetTop('10px')
+ setCodeViewOffsetTop('12px')
}
if (elePosition / innerHeight * 100 < 33) {
- setCodeViewOffsetTop('calc(66.67vh - 10px)')
+ setCodeViewOffsetTop('calc(66.66vh - 12px)')
}
}
}
@@ -505,6 +508,7 @@ export const IFrame = (props: IFrameProps) => {
const onMouseLeave = useCallback((e: MouseEvent) => {
setFNHoveredItem('')
}, [])
+ const externalDblclick = useRef(false)
const onClick = useCallback((e: MouseEvent) => {
isEditing.current = false
if (!parseFileFlag) {
@@ -521,6 +525,7 @@ export const IFrame = (props: IFrameProps) => {
else {
const ele = e.target as HTMLElement
+ externalDblclick.current = true
// handle links
let isLinkTag = false
let linkElement = ele
@@ -582,6 +587,7 @@ export const IFrame = (props: IFrameProps) => {
if (firstClickEditableTags.filter(_ele => _ele === ele.tagName.toLowerCase()).length > 0 && !multiple && _uid === focusedItem){
setTimeout(() => {
onDblClick(e)
+ console.log('editable')
ele.focus()
}, 10)
}
@@ -697,9 +703,12 @@ export const IFrame = (props: IFrameProps) => {
}
};
}, []);
+ const dblClickTimestamp = useRef(0)
const onDblClick = useCallback((e: MouseEvent) => {
// open new page with tag in iframe
const ele = e.target as HTMLElement
+ if (dblClickTimestamp.current !== 0 && e.timeStamp - dblClickTimestamp.current < 500) return
+ dblClickTimestamp.current = e.timeStamp
let _ele = ele
while(_ele.tagName !== 'A') {
if (_ele.tagName === 'BODY' || _ele.tagName === 'HEAD' || _ele.tagName === 'HTML') {
@@ -720,7 +729,7 @@ export const IFrame = (props: IFrameProps) => {
const node = validNodeTree[uid]
if (!node) return
const nodeData = node.data as THtmlNodeData
- if (nodeData.name === 'html' || nodeData.name === 'head' || nodeData.name === 'body' || nodeData.name === 'img') return
+ if (nodeData.name === 'html' || nodeData.name === 'head' || nodeData.name === 'body' || nodeData.name === 'img' || nodeData.name === 'div') return
const cleanedUpCode = ele.outerHTML.replace(/rnbwdev-rnbw-element-hover=""|rnbwdev-rnbw-element-select=""|contenteditable="true"|contenteditable="false"/g, '')
setOuterHtml(cleanedUpCode)
@@ -730,6 +739,21 @@ export const IFrame = (props: IFrameProps) => {
isEditing.current = true
ele.setAttribute('contenteditable', 'true')
contentEditableUidRef.current = uid
+
+ // set focus where you clicked
+ const range = contentRef?.contentWindow?.document.createRange();
+
+ if (range) {
+ // const selection = contentRef?.contentWindow?.getSelection();
+ // const clickPosition = selection?.getRangeAt(0).startOffset;
+ // console.log(clickPosition)
+ // clickPosition && range.setStart(ele.childNodes[0], 5);
+ // range.collapse(true);
+ // selection?.removeAllRanges();
+ // selection?.addRange(range);
+ // ele.focus();
+ }
+
ele.addEventListener('paste', (event) => {
event.preventDefault();
if (isEditing.current) {
@@ -754,28 +778,79 @@ export const IFrame = (props: IFrameProps) => {
// check if it's a web component and open its js file
let _ele = ele
let flag = true
- while(flag) {
- if (_ele.getAttribute(NodeInAppAttribName) !== null) {
- for (let x in ffTree) {
- // check web component
- if (x.search('/' + _ele.tagName.toLowerCase() + '.js') !== -1) {
- setInitialFileToOpen(ffTree[x].uid)
- setNavigatorDropDownType('project')
+ let exist = false
+ if (!externalDblclick.current)
+ {
+ while(flag) {
+ if (_ele.getAttribute(NodeInAppAttribName) !== null) {
+ let uid: TNodeUid | null = _ele.getAttribute(NodeInAppAttribName)
+ if (uid) {
+ for (let x in ffTree) {
+ const node = validNodeTree[uid]
+ const defineRegex = /customElements\.define\(\s*['"]([\w-]+)['"]/;
+ if ((ffTree[x].data as TFileNodeData).content && (ffTree[x].data as TFileNodeData).ext === '.js') {
+ const match = ((ffTree[x].data as TFileNodeData).content).match(defineRegex);
+ if (match) {
+ // check web component
+ if (_ele.tagName.toLowerCase() === match[1].toLowerCase()) {
+ const fileName = (ffTree[x].data as TFileNodeData).name
+ let src = ''
+ for (let i in validNodeTree) {
+ if ((validNodeTree[i].data as THtmlNodeData).type === 'script' && (validNodeTree[i].data as THtmlNodeData).html.search(fileName + '.js') !== -1) {
+ src = (validNodeTree[i].data as THtmlNodeData).attribs.src
+ break
+ }
+ }
+ if (src !== '') {
+ if (src.startsWith('http') || src.startsWith('//')) {
+ alert('rnbw couldn\'t find it\'s source file')
+ flag = false
+ break
+ }
+ else{
+ setInitialFileToOpen(ffTree[x].uid)
+ setNavigatorDropDownType('project')
+ // expand path to the uid
+ const _expandedItems: string[] = []
+ let _file = ffTree[x]
+ while (_file && _file.uid !== RootNodeUid) {
+ _file = ffTree[_file.parentUid as string]
+ if (_file && !_file.isEntity && (!expandedItemsObj[_file.uid] || expandedItemsObj[_file.uid] === undefined))
+ _expandedItems.push(_file.uid)
+ }
+ dispatch(expandFFNode(_expandedItems))
+ flag = false
+ exist = true
+ break
+ }
+ }
+ }
+ }
+ }
+ }
+ flag = false
+ }
+ else{
flag = false
- break
}
}
- flag = false
- }
- else if (_ele.parentElement) {
- _ele = _ele.parentElement
- }
- else{
- flag = false
+ else if (_ele.parentElement) {
+ _ele = _ele.parentElement
+ }
+ else{
+ flag = false
+ }
}
}
+ else{
+ exist = true
+ }
+
+ if (!exist) {
+ alert('rnbw couldn\'t find it\'s source file')
+ }
}
- }, [validNodeTree, ffTree, focusedItem])
+ }, [validNodeTree, ffTree, expandedItemsObj])
// -------------------------------------------------------------- cmdk --------------------------------------------------------------
const onKeyDown = useCallback((e: KeyboardEvent) => {
if (contentEditableUidRef.current !== '') return
@@ -825,6 +900,7 @@ export const IFrame = (props: IFrameProps) => {
};
useEffect(() => {
if (contentRef) {
+ dblClickTimestamp.current = 0
setIFrameLoading(true)
contentRef.onload = () => {
@@ -862,6 +938,7 @@ export const IFrame = (props: IFrameProps) => {
setIframeEvent(e)
})
htmlNode.addEventListener('dblclick', (e: MouseEvent) => {
+ externalDblclick.current = false
setIframeEvent(e)
})
htmlNode.addEventListener('keydown', (e: KeyboardEvent) => {
diff --git a/src/pages/main/MainPage.tsx b/src/pages/main/MainPage.tsx
index e2ddafb7..4112fd72 100644
--- a/src/pages/main/MainPage.tsx
+++ b/src/pages/main/MainPage.tsx
@@ -25,10 +25,7 @@ import {
useParams,
} from 'react-router-dom';
-import {
- Loader,
- SVGIcon,
-} from '@_components/common';
+import { SVGIcon } from '@_components/common';
import {
ActionsPanel,
CodeView,
@@ -913,7 +910,7 @@ export default function MainPage(props: MainPageProps) {
const [actionsPanelWidth, setActionsPanelWidth] = useState(240)
const [codeViewOffsetBottom, setCodeViewOffsetBottom] = useState('10')
- const [codeViewOffsetTop, setCodeViewOffsetTop] = useState('calc(66.67vh - 10px)')
+ const [codeViewOffsetTop, setCodeViewOffsetTop] = useState('calc(66.66vh - 12px)')
const [codeViewOffsetLeft, setCodeViewOffsetLeft] = useState(10)
const [codeViewHeight, setCodeViewHeight] = useState("33.33")
const [codeViewDragging, setCodeViewDragging] = useState(false)
@@ -1384,7 +1381,7 @@ export default function MainPage(props: MainPageProps) {