@quadrats/common 0.7.7 → 1.0.0

package/heading/typings.d.ts

@@ -2,6 +2,7 @@ import { Editor, QuadratsElement, GetNodesOptions, Node, NodeEntry, Withable, Wi
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export interface HeadingElement extends QuadratsElement, WithElementType {
     level: HeadingLevel;
+    align?: 'left' | 'center' | 'right';
 }
 export interface WithEnabledHeadingLevels<L extends HeadingLevel> {
     /**

package/image/createImage.js

@@ -3,7 +3,7 @@ import { Range, isNodesTypeIn, getAboveByTypes, Editor, Transforms, createParagr
 import { IMAGE_TYPES } from './constants.js';
 
 function resolveSizeSteps(steps) {
-    let sortedSteps = steps.filter(step => step > 0 && step < 100).sort();
+    let sortedSteps = steps.filter((step) => step > 0 && step < 100).sort();
     if (!sortedSteps.includes(100)) {
         sortedSteps = [...sortedSteps, 100];
     }
@@ -16,12 +16,13 @@ function createImage(options = {}) {
     const getAboveImageFigure = (editor, options) => getAboveByTypes(editor, [types.figure], options);
     const getAboveImageCaption = (editor, options) => getAboveByTypes(editor, [types.caption], options);
     const isNodesInImage = (editor, options) => isNodesTypeIn(editor, [types.image], options);
-    const isSelectionInImage = editor => isNodesInImage(editor);
-    const isSelectionInImageCaption = editor => isNodesTypeIn(editor, [types.caption]);
-    const isCollapsedOnImage = editor => !!editor.selection && Range.isCollapsed(editor.selection) && isSelectionInImage(editor);
+    const isSelectionInImage = (editor) => isNodesInImage(editor);
+    const isSelectionInImageCaption = (editor) => isNodesTypeIn(editor, [types.caption]);
+    const isCollapsedOnImage = (editor) => !!editor.selection && Range.isCollapsed(editor.selection) && isSelectionInImage(editor);
     const createImageElement = (src, hosting) => {
         const imageElement = {
             type: types.image,
+            figureType: types.figure,
             src,
             hosting,
             children: [{ text: '' }],
@@ -51,7 +52,7 @@ function createImage(options = {}) {
         if (!sizeSteps) {
             return percentage;
         }
-        const lowerIndex = sizeSteps.findIndex(step => step >= percentage) - 1;
+        const lowerIndex = sizeSteps.findIndex((step) => step >= percentage) - 1;
         const upperIndex = lowerIndex + 1;
         if (lowerIndex < 0) {
             return sizeSteps[0];
@@ -89,7 +90,7 @@ function createImage(options = {}) {
         insertImage,
         resizeImage,
         with(editor) {
-            const { deleteBackward, deleteForward, insertBreak, isVoid, normalizeNode, } = editor;
+            const { deleteBackward, deleteForward, insertBreak, isVoid, normalizeNode } = editor;
             const deleteCollapsed = (origin, isEdgeMethodName) => {
                 const { selection } = editor;
                 /**
@@ -97,7 +98,7 @@ function createImage(options = {}) {
                  */
                 if (selection && Range.isCollapsed(selection)) {
                     const [, captionPath] = getAboveImageCaption(editor) || [];
-                    if ((captionPath && Editor[isEdgeMethodName](editor, selection.focus, captionPath))) {
+                    if (captionPath && Editor[isEdgeMethodName](editor, selection.focus, captionPath)) {
                         return;
                     }
                 }
@@ -128,7 +129,7 @@ function createImage(options = {}) {
                 }
                 insertBreak();
             };
-            editor.isVoid = element => element.type === types.image || isVoid(element);
+            editor.isVoid = (element) => element.type === types.image || isVoid(element);
             editor.normalizeNode = (entry) => {
                 const [node, path] = entry;
                 if (Element.isElement(node)) {
@@ -140,9 +141,9 @@ function createImage(options = {}) {
                     }
                     else if (node.type === types.image) {
                         const { src, width, hosting } = node;
-                        if (typeof src !== 'string'
-                            || !(width == null || typeof width === 'number')
-                            || !(hosting == null || typeof hosting === 'string')) {
+                        if (typeof src !== 'string' ||
+                            !(width == null || typeof width === 'number') ||
+                            !(hosting == null || typeof hosting === 'string')) {
                             const [, figurePath] = getAboveImageFigure(editor, { at: path }) || [];
                             if (figurePath) {
                                 Transforms.removeNodes(editor, { at: figurePath });

package/image/getImageFigureElementCommonProps.d.ts

@@ -1,6 +1,8 @@
 import { ImageFigureElement } from './typings';
 export declare function getImageFigureElementCommonProps(element: ImageFigureElement): {
     style?: {
+        '--qdr-image-align': 'flex-start' | 'center' | 'flex-end';
+        '--qdr-image-caption-align': 'left' | 'center' | 'right';
         width: string;
     };
 };

package/image/getImageFigureElementCommonProps.js

@@ -1,7 +1,33 @@
 function getImageFigureElementCommonProps(element) {
-    const { width } = element;
+    const { width, align } = element;
     return {
-        style: typeof width === 'number' ? { width: `${width}%` } : undefined,
+        style: {
+            width: typeof width === 'number' ? `${width}%` : 'unset',
+            '--qdr-image-align': (() => {
+                switch (align) {
+                    case 'start':
+                        return 'flex-start';
+                    case 'center':
+                        return 'center';
+                    case 'end':
+                        return 'flex-end';
+                    default:
+                        return 'flex-start';
+                }
+            })(),
+            '--qdr-image-caption-align': (() => {
+                switch (align) {
+                    case 'start':
+                        return 'left';
+                    case 'center':
+                        return 'center';
+                    case 'end':
+                        return 'right';
+                    default:
+                        return 'left';
+                }
+            })(),
+        },
     };
 }
 

package/image/index.cjs.js

@@ -14,9 +14,35 @@ function isHostingNotRequired(src) {
 }
 
 function getImageFigureElementCommonProps(element) {
-    const { width } = element;
+    const { width, align } = element;
     return {
-        style: typeof width === 'number' ? { width: `${width}%` } : undefined,
+        style: {
+            width: typeof width === 'number' ? `${width}%` : 'unset',
+            '--qdr-image-align': (() => {
+                switch (align) {
+                    case 'start':
+                        return 'flex-start';
+                    case 'center':
+                        return 'center';
+                    case 'end':
+                        return 'flex-end';
+                    default:
+                        return 'flex-start';
+                }
+            })(),
+            '--qdr-image-caption-align': (() => {
+                switch (align) {
+                    case 'start':
+                        return 'left';
+                    case 'center':
+                        return 'center';
+                    case 'end':
+                        return 'right';
+                    default:
+                        return 'left';
+                }
+            })(),
+        },
     };
 }
 
@@ -29,7 +55,7 @@ function getImageElementCommonProps(element, hostingResolvers) {
 }
 
 function resolveSizeSteps(steps) {
-    let sortedSteps = steps.filter(step => step > 0 && step < 100).sort();
+    let sortedSteps = steps.filter((step) => step > 0 && step < 100).sort();
     if (!sortedSteps.includes(100)) {
         sortedSteps = [...sortedSteps, 100];
     }
@@ -42,12 +68,13 @@ function createImage(options = {}) {
     const getAboveImageFigure = (editor, options) => core.getAboveByTypes(editor, [types.figure], options);
     const getAboveImageCaption = (editor, options) => core.getAboveByTypes(editor, [types.caption], options);
     const isNodesInImage = (editor, options) => core.isNodesTypeIn(editor, [types.image], options);
-    const isSelectionInImage = editor => isNodesInImage(editor);
-    const isSelectionInImageCaption = editor => core.isNodesTypeIn(editor, [types.caption]);
-    const isCollapsedOnImage = editor => !!editor.selection && core.Range.isCollapsed(editor.selection) && isSelectionInImage(editor);
+    const isSelectionInImage = (editor) => isNodesInImage(editor);
+    const isSelectionInImageCaption = (editor) => core.isNodesTypeIn(editor, [types.caption]);
+    const isCollapsedOnImage = (editor) => !!editor.selection && core.Range.isCollapsed(editor.selection) && isSelectionInImage(editor);
     const createImageElement = (src, hosting) => {
         const imageElement = {
             type: types.image,
+            figureType: types.figure,
             src,
             hosting,
             children: [{ text: '' }],
@@ -77,7 +104,7 @@ function createImage(options = {}) {
         if (!sizeSteps) {
             return percentage;
         }
-        const lowerIndex = sizeSteps.findIndex(step => step >= percentage) - 1;
+        const lowerIndex = sizeSteps.findIndex((step) => step >= percentage) - 1;
         const upperIndex = lowerIndex + 1;
         if (lowerIndex < 0) {
             return sizeSteps[0];
@@ -115,7 +142,7 @@ function createImage(options = {}) {
         insertImage,
         resizeImage,
         with(editor) {
-            const { deleteBackward, deleteForward, insertBreak, isVoid, normalizeNode, } = editor;
+            const { deleteBackward, deleteForward, insertBreak, isVoid, normalizeNode } = editor;
             const deleteCollapsed = (origin, isEdgeMethodName) => {
                 const { selection } = editor;
                 /**
@@ -123,7 +150,7 @@ function createImage(options = {}) {
                  */
                 if (selection && core.Range.isCollapsed(selection)) {
                     const [, captionPath] = getAboveImageCaption(editor) || [];
-                    if ((captionPath && core.Editor[isEdgeMethodName](editor, selection.focus, captionPath))) {
+                    if (captionPath && core.Editor[isEdgeMethodName](editor, selection.focus, captionPath)) {
                         return;
                     }
                 }
@@ -154,7 +181,7 @@ function createImage(options = {}) {
                 }
                 insertBreak();
             };
-            editor.isVoid = element => element.type === types.image || isVoid(element);
+            editor.isVoid = (element) => element.type === types.image || isVoid(element);
             editor.normalizeNode = (entry) => {
                 const [node, path] = entry;
                 if (core.Element.isElement(node)) {
@@ -166,9 +193,9 @@ function createImage(options = {}) {
                     }
                     else if (node.type === types.image) {
                         const { src, width, hosting } = node;
-                        if (typeof src !== 'string'
-                            || !(width == null || typeof width === 'number')
-                            || !(hosting == null || typeof hosting === 'string')) {
+                        if (typeof src !== 'string' ||
+                            !(width == null || typeof width === 'number') ||
+                            !(hosting == null || typeof hosting === 'string')) {
                             const [, figurePath] = getAboveImageFigure(editor, { at: path }) || [];
                             if (figurePath) {
                                 core.Transforms.removeNodes(editor, { at: figurePath });

package/image/typings.d.ts

@@ -4,11 +4,13 @@ export type ImageTypeKey = 'image';
 export type ImageCaptionTypeKey = 'caption';
 export type ImageTypes = Record<ImageFigureTypeKey | ImageTypeKey | ImageCaptionTypeKey, string>;
 export interface ImageFigureElement extends QuadratsElement, WithElementType {
+    align?: 'start' | 'center' | 'end';
     width?: number;
 }
 export interface ImageElement extends QuadratsElement, WithElementType {
     children: [Text];
     src: string;
+    figureType: string;
     /**
      * e.g. The src of image is `8gy9pbaht92y4.jpg` and your static files are hosted by `https://foo.storage`.
      * Then you can make the hosting of element be `foo`.

package/list/createList.d.ts

@@ -1,5 +1,6 @@
 import { List, ListTypes } from './typings';
 export interface CreateListOptions {
     types?: Partial<ListTypes>;
+    labels?: number;
 }
 export declare function createList(options?: CreateListOptions): List;

package/list/createList.js

@@ -2,6 +2,8 @@ import { PARAGRAPH_TYPE, isNodesTypeIn, Range, isSelectionAtBlockEdge, deleteSel
 import { LIST_TYPES } from './constants.js';
 
 function createList(options = {}) {
+    var _a;
+    const labels = (_a = options.labels) !== null && _a !== void 0 ? _a : 4;
     const types = Object.assign(Object.assign({}, LIST_TYPES), options.types);
     const isListElement = (node) => [types.ol, types.ul].includes(node.type);
     const isListItemElement = (node) => node.type === types.li;
@@ -140,6 +142,7 @@ function createList(options = {}) {
     };
     return {
         types,
+        labels,
         isListElement,
         isListItemElement,
         isSelectionInList,

package/list/index.cjs.js

@@ -9,6 +9,8 @@ const LIST_TYPES = {
 };
 
 function createList(options = {}) {
+    var _a;
+    const labels = (_a = options.labels) !== null && _a !== void 0 ? _a : 4;
     const types = Object.assign(Object.assign({}, LIST_TYPES), options.types);
     const isListElement = (node) => [types.ol, types.ul].includes(node.type);
     const isListItemElement = (node) => node.type === types.li;
@@ -147,6 +149,7 @@ function createList(options = {}) {
     };
     return {
         types,
+        labels,
         isListElement,
         isListItemElement,
         isSelectionInList,

package/list/typings.d.ts

@@ -17,6 +17,7 @@ export interface List<T extends Editor = Editor> extends Withable {
      * An object which keys are `ul`, `ol`, `li` and values are the corresponding element types.
      */
     types: ListTypes;
+    labels: number;
     isListElement(node: Node): node is QuadratsElement;
     isListItemElement(node: Node): node is QuadratsElement;
     isSelectionInList(editor: T, listTypeKey: ListRootTypeKey): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quadrats/common",
-  "version": "0.7.7",
+  "version": "1.0.0",
   "description": "",
   "author": "Rytass",
   "homepage": "https://github.com/Quadrats/quadrats#readme",
@@ -18,8 +18,8 @@
     "url": "https://github.com/Quadrats/quadrats/issues"
   },
   "dependencies": {
-    "@quadrats/core": "^0.7.7",
-    "@quadrats/locales": "^0.7.7",
-    "@quadrats/utils": "^0.7.2"
+    "@quadrats/core": "^1.0.0",
+    "@quadrats/locales": "^1.0.0",
+    "@quadrats/utils": "^1.0.0"
   }
 }

package/paragraph/createParagraph.d.ts

@@ -0,0 +1,2 @@
+import { Paragraph } from './typings';
+export declare function createParagraph(): Paragraph;

package/paragraph/createParagraph.js

@@ -0,0 +1,24 @@
+import { getNodes, PARAGRAPH_TYPE, Transforms } from '@quadrats/core';
+
+function createParagraph() {
+    const getParagraphNodes = (editor, options = {}) => getNodes(editor, Object.assign(Object.assign({}, options), { match: (node) => node.type === PARAGRAPH_TYPE }));
+    const isSelectionInParagraph = (editor, options = {}) => {
+        const [match] = getParagraphNodes(editor, options);
+        return !!match;
+    };
+    const setParagraphNodes = (editor) => {
+        const paragraph = { type: PARAGRAPH_TYPE, children: [] };
+        Transforms.setNodes(editor, paragraph);
+    };
+    return {
+        type: PARAGRAPH_TYPE,
+        getParagraphNodes,
+        isSelectionInParagraph,
+        setParagraphNodes,
+        with(editor) {
+            return editor;
+        },
+    };
+}
+
+export { createParagraph };

package/paragraph/index.cjs.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var core = require('@quadrats/core');
+
+function createParagraph() {
+    const getParagraphNodes = (editor, options = {}) => core.getNodes(editor, Object.assign(Object.assign({}, options), { match: (node) => node.type === core.PARAGRAPH_TYPE }));
+    const isSelectionInParagraph = (editor, options = {}) => {
+        const [match] = getParagraphNodes(editor, options);
+        return !!match;
+    };
+    const setParagraphNodes = (editor) => {
+        const paragraph = { type: core.PARAGRAPH_TYPE, children: [] };
+        core.Transforms.setNodes(editor, paragraph);
+    };
+    return {
+        type: core.PARAGRAPH_TYPE,
+        getParagraphNodes,
+        isSelectionInParagraph,
+        setParagraphNodes,
+        with(editor) {
+            return editor;
+        },
+    };
+}
+
+exports.createParagraph = createParagraph;

package/paragraph/index.d.ts

@@ -0,0 +1,2 @@
+export * from './typings';
+export * from './createParagraph';

package/paragraph/index.js

@@ -0,0 +1 @@
+export { createParagraph } from './createParagraph.js';

package/paragraph/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@quadrats/common/paragraph",
+  "sideEffects": false,
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
+}

package/paragraph/typings.d.ts

@@ -0,0 +1,9 @@
+import { Editor, QuadratsElement, GetNodesOptions, Node, NodeEntry, Withable, WithElementType } from '@quadrats/core';
+export interface ParagraphElement extends QuadratsElement {
+    align?: 'left' | 'center' | 'right';
+}
+export interface Paragraph<T extends Editor = Editor> extends WithElementType, Withable {
+    getParagraphNodes(editor: T, options?: GetNodesOptions): Generator<NodeEntry<Node>>;
+    isSelectionInParagraph(editor: T, options?: GetNodesOptions): boolean;
+    setParagraphNodes(editor: T): void;
+}