ish-ui 1.1.3 → 1.2.4

package/dist/layout/index.d.ts

@@ -2,3 +2,4 @@ export * from './resizable/ResizableWrapper';
 export { default as ResizableWrapper } from './resizable/ResizableWrapper';
 export * from './InfoPill';
 export { default as InfoPill } from './InfoPill';
+export { default as Tree } from './tree/Tree';

package/dist/layout/index.js

@@ -9,3 +9,4 @@ export * from './resizable/ResizableWrapper';
 export { default as ResizableWrapper } from './resizable/ResizableWrapper';
 export * from './InfoPill';
 export { default as InfoPill } from './InfoPill';
+export { default as Tree } from './tree/Tree';

package/dist/layout/tree/Tree.d.ts

@@ -0,0 +1,10 @@
+import Tree from '@atlaskit/tree';
+import React from 'react';
+declare class PatchTree extends Tree {
+    setPlaceholderProps: (placeholderProps: any) => void;
+    onDragStartCustom: (event: any) => void;
+    onDragUpdateCustom: (event: any) => void;
+    render(): React.JSX.Element;
+}
+declare const _default: typeof PatchTree;
+export default _default;

package/dist/layout/tree/Tree.js

@@ -0,0 +1,107 @@
+/*
+ * Copyright ish group pty ltd 2025.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+import Tree from '@atlaskit/tree';
+import isEmpty from 'lodash.isempty';
+import React from 'react';
+import * as ReactBeautifulDnD from 'react-beautiful-dnd-next';
+import { withStyles } from 'tss-react/mui';
+const TAG_ITEMS_SPACING = 8;
+const getDraggedDom = draggableId => document.querySelector(`[data-draggable-id='${draggableId}']`);
+const styles = (theme) => ({
+    placeholder: {
+        border: `2px dashed ${theme.palette.action.focus}`,
+        borderRadius: `${theme.shape.borderRadius}px`,
+        position: 'absolute',
+        boxSizing: 'border-box',
+        zIndex: 0
+    }
+});
+class PatchTree extends Tree {
+    constructor() {
+        super(...arguments);
+        this.setPlaceholderProps = placeholderProps => {
+            this.setState({
+                placeholderProps
+            });
+        };
+        this.onDragStartCustom = event => {
+            const draggedDOM = getDraggedDom(event.draggableId);
+            if (!draggedDOM) {
+                return;
+            }
+            const { clientHeight, clientWidth } = draggedDOM;
+            const sourceIndex = event.source.index;
+            const paddingLeft = parseFloat(window.getComputedStyle(draggedDOM).paddingLeft);
+            const prevNode = draggedDOM.parentNode.children[sourceIndex - 1];
+            const clientY = prevNode ? prevNode.offsetTop + prevNode.clientHeight + TAG_ITEMS_SPACING : TAG_ITEMS_SPACING;
+            this.setPlaceholderProps({
+                clientHeight: clientHeight - TAG_ITEMS_SPACING,
+                clientWidth: clientWidth - paddingLeft,
+                clientY,
+                clientX: paddingLeft
+            });
+        };
+        this.onDragUpdateCustom = event => {
+            if (!event.destination) {
+                return;
+            }
+            const draggedDOM = getDraggedDom(event.draggableId);
+            if (!draggedDOM) {
+                return;
+            }
+            const destinationIndex = event.destination.index;
+            const sourceIndex = event.source.index;
+            const childrenArray = [...draggedDOM.parentNode.children];
+            const targetDOM = childrenArray[destinationIndex > sourceIndex ? destinationIndex + 1 : destinationIndex];
+            const { clientWidth, offsetTop } = targetDOM;
+            const clientY = sourceIndex === destinationIndex
+                ? sourceIndex > 0
+                    ? (childrenArray[sourceIndex - 1].offsetTop + childrenArray[sourceIndex - 1].clientHeight + TAG_ITEMS_SPACING)
+                    : TAG_ITEMS_SPACING
+                : offsetTop + TAG_ITEMS_SPACING;
+            let paddingLeft = parseFloat(window.getComputedStyle(targetDOM).paddingLeft);
+            if (destinationIndex > 0 && destinationIndex !== sourceIndex) {
+                const prevPadding = parseFloat(window.getComputedStyle(childrenArray[destinationIndex - 1]).paddingLeft);
+                if (prevPadding > paddingLeft) {
+                    paddingLeft = prevPadding;
+                }
+            }
+            this.setPlaceholderProps({
+                clientHeight: draggedDOM.clientHeight - TAG_ITEMS_SPACING,
+                clientWidth: clientWidth - paddingLeft,
+                clientY,
+                clientX: paddingLeft
+            });
+        };
+    }
+    render() {
+        const { isNestingEnabled, classes } = this.props;
+        const { placeholderProps } = this.state;
+        const renderedItems = this.renderItems();
+        return (React.createElement(ReactBeautifulDnD.DragDropContext, { onDragStart: e => {
+                this.onDragStartCustom(e);
+                this.onDragStart(e);
+            }, onDragEnd: this.onDragEnd, onDragUpdate: e => {
+                this.onDragUpdateCustom(e);
+                this.onDragUpdate(e);
+            } },
+            React.createElement(ReactBeautifulDnD.Droppable, { droppableId: "tree", isCombineEnabled: isNestingEnabled, ignoreContainerClipping: true }, (dropProvided, snapshot) => {
+                const finalProvided = this.patchDroppableProvided(dropProvided);
+                return (React.createElement("div", Object.assign({ ref: finalProvided.innerRef, style: { pointerEvents: 'auto', position: 'relative' }, onTouchMove: this.onPointerMove, onMouseMove: this.onPointerMove }, finalProvided.droppableProps),
+                    renderedItems,
+                    dropProvided.placeholder,
+                    !isEmpty(placeholderProps) && snapshot.isDraggingOver && (React.createElement("div", { className: classes.placeholder, style: {
+                            top: placeholderProps.clientY,
+                            left: placeholderProps.clientX,
+                            height: placeholderProps.clientHeight,
+                            width: placeholderProps.clientWidth
+                        } }))));
+            })));
+    }
+}
+export default withStyles(PatchTree, styles);

package/dist/markdownEditor/HtmlEditor.d.ts

@@ -12,5 +12,5 @@ interface Props {
     onChange: (html: any) => void;
     height: string;
 }
-declare function HtmlEditor(props: Props): React.JSX.Element;
+declare function HtmlEditor({ value, onChange, mode, height }: Props): React.JSX.Element;
 export default HtmlEditor;

package/dist/markdownEditor/HtmlEditor.js

@@ -7,12 +7,11 @@ import 'ace-builds/src-noconflict/theme-tomorrow';
 import 'ace-builds/src-noconflict/ext-language_tools';
 import 'ace-builds/src-noconflict/snippets/html';
 import 'ace-builds/src-noconflict/snippets/textile';
-function HtmlEditor(props) {
-    const { value, onChange, mode = 'html', height } = props;
+function HtmlEditor({ value, onChange, mode = 'html', height }) {
     return (React.createElement(AceEditor, { mode: mode, theme: "tomorrow", fontSize: 14, height: height, showGutter: false, width: "100%", wrapEnabled: true, highlightActiveLine: true, enableLiveAutocompletion: mode === 'html', enableBasicAutocompletion: mode === 'html', setOptions: {
             enableSnippets: true,
             showLineNumbers: true,
             tabSize: 2,
-        }, editorProps: { $blockScrolling: Infinity }, defaultValue: value, onChange: onChange }));
+        }, editorProps: { $blockScrolling: Infinity }, value: value, onChange: onChange }));
 }
 export default HtmlEditor;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ish-ui",
   "sideEffects": false,
-  "version": "1.1.3",
+  "version": "1.2.4",
   "description": "UI elements for onCourse and other ish apps",
   "main": "main.ts",
   "devDependencies": {
@@ -40,6 +40,7 @@
     "webpack-dev-server": "^5.1.0"
   },
   "dependencies": {
+    "@atlaskit/tree": "^9.0.0",
     "@ckeditor/ckeditor5-autoformat": "43.1.1",
     "@ckeditor/ckeditor5-basic-styles": "43.1.1",
     "@ckeditor/ckeditor5-dev-utils": "^42.1.0",
@@ -72,6 +73,7 @@
     "date-fns-tz": "^2.0.0",
     "decimal.js-light": "^2.5.1",
     "lodash.debounce": "^4.0.8",
+    "lodash.isempty": "^4.4.0",
     "re-resizable": "^6.10.0",
     "react": "^18.3.1",
     "react-ace": "^12.0.0",