5htp-core 0.4.9-2 → 0.4.9-6

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.4.9-2",
+	"version": "0.4.9-6",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -34,6 +34,7 @@
 		"dayjs": "^1.11.5",
 		"deep-extend": "^0.6.0",
 		"dottie": "^2.0.2",
+		"escape-regexp": "^0.0.1",
 		"express": "^4.17.1",
 		"express-csp-header": "^5.0.0",
 		"express-fileupload": "^1.2.1",
@@ -74,7 +75,9 @@
 		"regenerator-runtime": "^0.13.9",
 		"request": "^2.88.2",
 		"sharp": "^0.29.1",
+		"slugify": "^1.6.6",
 		"sql-formatter": "^4.0.2",
+		"stopword": "^3.1.1",
 		"tslog": "^4.9.1",
 		"uuid": "^8.3.2",
 		"uuid-by-string": "^3.0.4",

package/src/client/assets/css/components/lists.less

@@ -94,9 +94,9 @@ ol.steps {
         // Stepnumber = at the left
         &:not(.col) {
     
-            padding-left: /*@sizeStep + */(@spacing);
+            padding-left: /*@sizeStep + */1.5em;
             padding-top: (@sizeStep - @itemLineHeight) / 2;
-            line-height: @itemLineHeight;
+            //line-height: @itemLineHeight;
             margin: 5px 0;
     
             &:before {
@@ -124,7 +124,7 @@ strong.step {
     font-weight: bold;
 
     font-size: 1em;
-    line-height: 1.8em;
+    line-height: 2.2em;
 }
 
 /*----------------------------------

package/src/client/components/Form.ts

@@ -17,7 +17,7 @@ export type { TValidationResult, TSchemaData } from '@common/validation/schema';
 /*----------------------------------
 - TYPES
 ----------------------------------*/
-type TFormOptions<TFormData extends {}> = {
+export type TFormOptions<TFormData extends {}> = {
     data?: Partial<TFormData>,
     submit?: (data: TFormData) => Promise<void>,
     autoValidateOnly?: (keyof TFormData)[],

package/src/client/components/Select/ChoiceElement.tsx

@@ -34,7 +34,7 @@ export default ({ choice, currentList, onChange, multiple, includeCurrent, forma
 
     return format === 'list' ? (
         <li>
-            <Button icon={isCurrent ? 'check-circle' : undefined} onClick={() => onChange( current => multiple 
+            <Button active={isCurrent} onClick={() => onChange( current => multiple 
                 ? (isCurrent 
                     ? currentList.filter(item => item.value !== choice.value) 
                     : [...(current || []), choice]
@@ -44,34 +44,27 @@ export default ({ choice, currentList, onChange, multiple, includeCurrent, forma
                 {choice.label} 
             </Button>
         </li>
-    ) : isCurrent ? (
-        <li class={"badge bg primary"+  (showRemoveButton ? ' pdr-05' : '')}>
-            {choice.label}
-
-            {showRemoveButton && (
-                <span class="badge xs clickable" onClick={(e) => {
-                    e.stopPropagation();
-                    onChange( current => current.filter( c => c.value !== choice.value))
-                    return false;
-                }}>
-                    x
-                </span>
-            )}
-        </li>
     ) : (
-        <li class={"badge clickable"} onClick={() => {
-            onChange( current => multiple 
-                ? [...(current || []), choice] 
-                : choice
-            );
-        }}>
-            {/*search.keywords ? (
-                <span>
-                
-                    <strong>{search.keywords}</strong>{choice.label.slice( search.keywords.length )}
+        <li>
+            <Button type="secondary" active={isCurrent} onClick={() => onChange(current => multiple
+                ? (isCurrent
+                    ? currentList.filter(item => item.value !== choice.value)
+                    : [...(current || []), choice]
+                )
+                : isCurrent ? undefined : choice
+            )}>
+                {choice.label}
 
-                </span>
-            ) : */choice.label}
+                {showRemoveButton && (
+                    <span class="badge xs clickable" onClick={(e) => {
+                        e.stopPropagation();
+                        onChange( current => current.filter( c => c.value !== choice.value))
+                        return false;
+                    }}>
+                        x
+                    </span>
+                )}
+            </Button>
         </li>
     )
 }

package/src/client/components/Select/index.tsx

@@ -250,51 +250,33 @@ export default (props: Props) => {
             ) : (
                 <div class="col sp-05">
                     <div class={className} onMouseDown={() => refInputSearch.current?.focus()}>
-                            
-                        <div class="row al-left wrap pd-1">
-                            
-                            {icon !== undefined && (
-                                <i src={icon} />
-                            )}
-
-                            <div class="col al-left sp-05">
-                                
-                                <label>{title}{isRequired && (
-                                    <span class="fg error">&nbsp;*</span>
-                                )}</label>
-
-                                <div class="row al-left wrap sp-05">
-
-                                    {selectedItems.map( choice => (
-                                        <ChoiceElement format='badge' choice={choice} 
-                                            currentList={currentList}
-                                            onChange={onChange}
-                                            multiple={multiple}
-                                            includeCurrent 
-                                        />
-                                    ))} 
-
-                                    {Search}  
-                                </div>
-                            </div>
 
-                        </div>
+                        <div class="row al-left wrap sp-05">
 
-                        <div class="pd-1">
-                            <ul class="row al-left wrap sp-05" style={{
-                                maxHeight: '30vh',
-                                overflowY: 'auto'
-                            }}>
-                                {choices.map( choice => (
-                                    <ChoiceElement format='badge' choice={choice} 
-                                        currentList={currentList}
-                                        onChange={onChange}
-                                        multiple={multiple}
-                                        includeCurrent
-                                    />
-                                ))}
-                            </ul>
+                            {selectedItems.map( choice => (
+                                <ChoiceElement format='badge' choice={choice} 
+                                    currentList={currentList}
+                                    onChange={onChange}
+                                    multiple={multiple}
+                                    includeCurrent 
+                                />
+                            ))} 
+
+                            {Search}  
                         </div>
+
+                        <ul class="row al-left wrap sp-05" style={{
+                            maxHeight: '30vh',
+                        }}>
+                            {choices.map( choice => (
+                                <ChoiceElement format='badge' choice={choice} 
+                                    currentList={currentList}
+                                    onChange={onChange}
+                                    multiple={multiple}
+                                    includeCurrent
+                                />
+                            ))}
+                        </ul>
                         
                     </div>
                     {errors?.length && (

package/src/client/components/inputv3/Rte/Editor.tsx

@@ -119,6 +119,12 @@ export default ({ value, setValue, props }: {
     // Trigger onchange oly when finished typing
     const refCommit = React.useRef<NodeJS.Timeout | null>(null);
 
+    const onRef = (_floatingAnchorElem: HTMLDivElement) => {
+        if (_floatingAnchorElem !== null) {
+            setFloatingAnchorElem(_floatingAnchorElem);
+        }
+    };
+
     const { historyState } = useSharedHistoryContext();
     const {
         settings: {
@@ -176,16 +182,18 @@ export default ({ value, setValue, props }: {
         }}>
             <div className="editor-container">
                 <ToolbarPlugin setIsLinkEditMode={setIsLinkEditMode} />
-                <div className="editor-inner reading">
+                <div className="editor-inner">
                     <RichTextPlugin
                         contentEditable={
-                            <ContentEditable
-                                className="editor-input"
-                                aria-placeholder={"Type text here ..."}
-                                placeholder={
-                                    <div className="editor-placeholder">Type text here ...</div>
-                                }
-                            />
+                            <div className="editor pdh-2" ref={onRef}>
+                                <ContentEditable
+                                    className="editor-input reading col"
+                                    aria-placeholder={"Type text here ..."}
+                                    placeholder={
+                                        <div className="editor-placeholder">Type text here ...</div>
+                                    }
+                                />
+                            </div>
                         }
                         ErrorBoundary={LexicalErrorBoundary}
                     />

package/src/client/components/inputv3/Rte/ToolbarPlugin/index.tsx

@@ -16,7 +16,6 @@ import ElementFormatDropdown from './ElementFormat';
 import BlockFormatDropDown, { blockTypeNames, rootTypeToRootName } from './BlockFormat';
 
 import {
-    $createCodeNode,
     $isCodeNode,
     CODE_LANGUAGE_FRIENDLY_NAME_MAP,
     CODE_LANGUAGE_MAP,
@@ -25,9 +24,6 @@ import {
 import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
 import {
     $isListNode,
-    INSERT_CHECK_LIST_COMMAND,
-    INSERT_ORDERED_LIST_COMMAND,
-    INSERT_UNORDERED_LIST_COMMAND,
     ListNode,
 } from '@lexical/list';
 import { INSERT_EMBED_COMMAND } from '@lexical/react/LexicalAutoEmbedPlugin';
@@ -35,17 +31,13 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { $isDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
 import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode';
 import {
-    $createHeadingNode,
-    $createQuoteNode,
     $isHeadingNode,
     $isQuoteNode,
-    HeadingTagType,
 } from '@lexical/rich-text';
 import {
     $getSelectionStyleValueForProperty,
     $isParentElementRTL,
     $patchStyleText,
-    $setBlocksType,
 } from '@lexical/selection';
 import { $isTableNode, $isTableSelection } from '@lexical/table';
 import {
@@ -126,7 +118,7 @@ function dropDownActiveClass(active: boolean) {
 
 
 
-function Divider(): JSX.Element {
+function Divider(): React.JSX.Element {
     return <div className="divider" />;
 }
 
@@ -134,7 +126,7 @@ export default function ToolbarPlugin({
     setIsLinkEditMode,
 }: {
     setIsLinkEditMode: Dispatch<boolean>;
-}): JSX.Element {
+}): React.JSX.Element {
 
     const { modal } = useContext();
 
@@ -482,7 +474,12 @@ export default function ToolbarPlugin({
     const canViewerSeeInsertCodeButton = !isImageCaption;
 
     return (
-        <div className="row menu al-left">
+        <div className="row menu al-left" style={{ 
+            position: 'sticky', 
+            top: 0, 
+            background: 'white', 
+            'zIndex': 5 
+        }}>
 
             {/* <Button icon="undo" size="s"
                 disabled={!canUndo || !isEditable}
@@ -598,7 +595,6 @@ export default function ToolbarPlugin({
                     <DropDown popover={{ tag: 'li' }} icon="font" size="s"
                         disabled={!isEditable}
                         title="Formatting options for additional text styles"
-                        buttonIconClassName="icon dropdown-more"
                     >
 
                         <Button icon="strikethrough" size="s"

package/src/client/components/inputv3/Rte/nodes/HeadingNode.ts

@@ -0,0 +1,55 @@
+
+import { HeadingNode, HeadingTagType } from '@lexical/rich-text';
+
+export default class HeadingWithAnchorNode extends HeadingNode {
+
+    public anchor?: string; 
+    
+    constructor( tag: HeadingTagType, key?: string ) {
+        super(tag, key);
+    }
+
+    // Adding a static method to register the custom node
+    static getType() {
+        return 'anchored-heading';
+    }
+
+    static clone(node) {
+        return new HeadingWithAnchorNode(node.getTag(), node.__key);
+    }
+
+    // Add a `anchor` attribute to the serialized JSON
+    static importJSON(serializedNode) {
+        const node = new HeadingWithAnchorNode(serializedNode.tag);
+        node.anchor = serializedNode.anchor;
+        return node;
+    }
+
+    // Ensure the `anchor` attribute is serialized in JSON
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: HeadingWithAnchorNode.getType(),
+            anchor: this.anchor,
+        };
+    }
+
+    // Override createDOM to set the `anchor` attribute
+    createDOM(config) {
+        const dom = super.createDOM(config);
+        if (this.anchor) {
+            dom.setAttribute('id', this.anchor);
+        }
+        return dom;
+    }
+
+    // Update the DOM to reflect changes in the `anchor` attribute
+    updateDOM(prevNode, dom) {
+        const updated = super.updateDOM(prevNode, dom);
+        if (this.anchor !== prevNode.anchor) {
+            dom.setAttribute('id', this.anchor);
+            return true;
+        }
+        return updated;
+    }
+}

package/src/client/components/inputv3/Rte/plugins/ComponentPickerPlugin/index.tsx

@@ -36,7 +36,10 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
 // Core
-import useContext from '@/client/context';
+import useContext, { ClientContext } from '@/client/context';
+
+// Custom Nodes
+import AnchoredHeadingNode from '@client/components/inputv3/Rte/nodes/HeadingNode';
 
 import { EmbedConfigs } from '../AutoEmbedPlugin';
 import { INSERT_COLLAPSIBLE_COMMAND } from '../CollapsiblePlugin';
@@ -50,7 +53,7 @@ class ComponentPickerOption extends MenuOption {
     // What shows up in the editor
     title: string;
     // Icon for display
-    icon?: JSX.Element;
+    icon?: React.JSX.Element;
     // For extra searching.
     keywords: Array<string>;
     // TBD
@@ -61,7 +64,7 @@ class ComponentPickerOption extends MenuOption {
     constructor(
         title: string,
         options: {
-            icon?: JSX.Element;
+            icon?: React.JSX.Element;
             keywords?: Array<string>;
             keyboardShortcut?: string;
             onSelect: (queryString: string) => void;
@@ -141,7 +144,7 @@ function getDynamicOptions(editor: LexicalEditor, queryString: string) {
     return options;
 }
 
-function getBaseOptions(editor: LexicalEditor, { modal }: TContext) {
+function getBaseOptions(editor: LexicalEditor, { modal }: ClientContext) {
     return [
         new ComponentPickerOption('Paragraph', {
             icon: <i className="icon paragraph" />,
@@ -163,7 +166,7 @@ function getBaseOptions(editor: LexicalEditor, { modal }: TContext) {
                         editor.update(() => {
                             const selection = $getSelection();
                             if ($isRangeSelection(selection)) {
-                                $setBlocksType(selection, () => $createHeadingNode(`h${n}`));
+                                $setBlocksType(selection, () => new AnchoredHeadingNode(`h${n}`));
                             }
                         }),
                 }),
@@ -281,7 +284,7 @@ function getBaseOptions(editor: LexicalEditor, { modal }: TContext) {
     ];
 }
 
-export default function ComponentPickerMenuPlugin(): JSX.Element {
+export default function ComponentPickerMenuPlugin(): React.JSX.Element {
     
     const [editor] = useLexicalComposerContext();
     const { modal, context } = useContext();

package/src/client/components/inputv3/Rte/plugins/DraggableBlockPlugin/index.css

@@ -1,36 +1,36 @@
 .draggable-block-menu {
-  border-radius: 4px;
-  padding: 2px 1px;
-  cursor: grab;
-  opacity: 0;
-  position: absolute;
-  left: 0;
-  top: 0;
-  will-change: transform;
+    border-radius: 4px;
+    padding: 2px 1px;
+    cursor: grab;
+    opacity: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    will-change: transform;
 }
 
 .draggable-block-menu .icon {
-  width: 16px;
-  height: 16px;
-  opacity: 0.3;
-  background-image: url(../../images/icons/draggable-block-menu.svg);
+    width: 16px;
+    height: 16px;
+    opacity: 0.3;
+    background-image: url(../../images/icons/draggable-block-menu.svg);
 }
 
 .draggable-block-menu:active {
-  cursor: grabbing;
+    cursor: grabbing;
 }
 
 .draggable-block-menu:hover {
-  background-color: #efefef;
+    background-color: #efefef;
 }
 
 .draggable-block-target-line {
-  pointer-events: none;
-  background: deepskyblue;
-  height: 4px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  will-change: transform;
-}
+    pointer-events: none;
+    background: deepskyblue;
+    height: 4px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0;
+    will-change: transform;
+}

package/src/client/components/inputv3/Rte/plugins/DraggableBlockPlugin/index.tsx

@@ -7,37 +7,39 @@
  */
 import './index.css';
 
-import {DraggableBlockPlugin_EXPERIMENTAL} from '@lexical/react/LexicalDraggableBlockPlugin';
-import {useRef} from 'react';
+import React from 'react';
+
+import { DraggableBlockPlugin_EXPERIMENTAL } from '@lexical/react/LexicalDraggableBlockPlugin';
+import { useRef } from 'react';
 
 const DRAGGABLE_BLOCK_MENU_CLASSNAME = 'draggable-block-menu';
 
 function isOnMenu(element: HTMLElement): boolean {
-  return !!element.closest(`.${DRAGGABLE_BLOCK_MENU_CLASSNAME}`);
+    return !!element.closest(`.${DRAGGABLE_BLOCK_MENU_CLASSNAME}`);
 }
 
 export default function DraggableBlockPlugin({
-  anchorElem = document.body,
+    anchorElem = document.body,
 }: {
-  anchorElem?: HTMLElement;
-}): JSX.Element {
-  const menuRef = useRef<HTMLDivElement>(null);
-  const targetLineRef = useRef<HTMLDivElement>(null);
+    anchorElem?: HTMLElement;
+    }): React.JSX.Element {
+    const menuRef = useRef<HTMLDivElement>(null);
+    const targetLineRef = useRef<HTMLDivElement>(null);
 
-  return (
-    <DraggableBlockPlugin_EXPERIMENTAL
-      anchorElem={anchorElem}
-      menuRef={menuRef}
-      targetLineRef={targetLineRef}
-      menuComponent={
-        <div ref={menuRef} className="icon draggable-block-menu">
-          <div className="icon" />
-        </div>
-      }
-      targetLineComponent={
-        <div ref={targetLineRef} className="draggable-block-target-line" />
-      }
-      isOnMenu={isOnMenu}
-    />
-  );
+    return (
+        <DraggableBlockPlugin_EXPERIMENTAL
+            anchorElem={anchorElem}
+            menuRef={menuRef}
+            targetLineRef={targetLineRef}
+            menuComponent={
+                <div ref={menuRef} className="icon draggable-block-menu">
+                    <div className="icon" />
+                </div>
+            }
+            targetLineComponent={
+                <div ref={targetLineRef} className="draggable-block-target-line" />
+            }
+            isOnMenu={isOnMenu}
+        />
+    );
 }

package/src/client/components/inputv3/Rte/plugins/FloatingLinkEditorPlugin/index.css

@@ -1,41 +1,13 @@
 .link-editor {
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  max-width: 400px;
-  width: 100%;
-  opacity: 0;
-  background-color: #fff;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
-  border-radius: 0 0 8px 8px;
-  transition: opacity 0.5s;
-  will-change: transform;
-}
 
-.link-editor .button {
-  width: 20px;
-  height: 20px;
-  display: inline-block;
-  padding: 6px;
-  border-radius: 8px;
-  cursor: pointer;
-  margin: 0 2px;
-}
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    max-width: 400px;
+    width: 100%;
 
-.link-editor .button.hovered {
-  width: 20px;
-  height: 20px;
-  display: inline-block;
-  background-color: #eee;
-}
-
-.link-editor .button i,
-.actions i {
-  background-size: contain;
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-  vertical-align: -0.25em;
-}
+    opacity: 0;
+    transition: opacity 0.5s;
+    will-change: transform;
+}