5htp-core 0.4.9-2 → 0.4.9-5

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-5",
 	"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

@@ -482,7 +482,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}

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;
+}