@cyberyozh/text-editor 0.1.12 → 0.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/editor.d.mts +4 -1
- package/dist/editor.d.ts +4 -1
- package/dist/editor.js +78 -5
- package/dist/editor.js.map +1 -1
- package/dist/editor.mjs +76 -4
- package/dist/editor.mjs.map +1 -1
- package/dist/render.d.mts +4 -1
- package/dist/render.d.ts +4 -1
- package/dist/render.js +35 -2
- package/dist/render.js.map +1 -1
- package/dist/render.mjs +33 -1
- package/dist/render.mjs.map +1 -1
- package/package.json +1 -1
- package/src/editor/dialogs/image-dialog/image-dialog.tsx +33 -2
- package/src/editor/editor.tsx +2 -2
- package/src/editor/index.ts +1 -0
- package/src/extensions/editor/figure.ts +20 -1
- package/src/render/index.ts +1 -0
- package/src/utils/html-to-tiptap-content.ts +41 -0
package/dist/editor.d.mts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { JSONContent } from '@tiptap/react';
|
|
3
3
|
export { JSONContent } from '@tiptap/react';
|
|
4
|
+
import { JSONContent as JSONContent$1 } from '@tiptap/core';
|
|
4
5
|
|
|
5
6
|
interface ImageUploadResult {
|
|
6
7
|
fileId?: string;
|
|
@@ -48,4 +49,6 @@ interface TiptapProps {
|
|
|
48
49
|
}
|
|
49
50
|
declare const Tiptap: (props: TiptapProps) => react_jsx_runtime.JSX.Element;
|
|
50
51
|
|
|
51
|
-
|
|
52
|
+
declare function htmlToTiptapContent(content: string | JSONContent$1): JSONContent$1;
|
|
53
|
+
|
|
54
|
+
export { Tiptap, type SupportedLanguage as TiptapSupportedLanguages, htmlToTiptapContent };
|
package/dist/editor.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { JSONContent } from '@tiptap/react';
|
|
3
3
|
export { JSONContent } from '@tiptap/react';
|
|
4
|
+
import { JSONContent as JSONContent$1 } from '@tiptap/core';
|
|
4
5
|
|
|
5
6
|
interface ImageUploadResult {
|
|
6
7
|
fileId?: string;
|
|
@@ -48,4 +49,6 @@ interface TiptapProps {
|
|
|
48
49
|
}
|
|
49
50
|
declare const Tiptap: (props: TiptapProps) => react_jsx_runtime.JSX.Element;
|
|
50
51
|
|
|
51
|
-
|
|
52
|
+
declare function htmlToTiptapContent(content: string | JSONContent$1): JSONContent$1;
|
|
53
|
+
|
|
54
|
+
export { Tiptap, type SupportedLanguage as TiptapSupportedLanguages, htmlToTiptapContent };
|
package/dist/editor.js
CHANGED
|
@@ -30,7 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
// src/editor/index.ts
|
|
31
31
|
var editor_exports = {};
|
|
32
32
|
__export(editor_exports, {
|
|
33
|
-
Tiptap: () => Tiptap
|
|
33
|
+
Tiptap: () => Tiptap,
|
|
34
|
+
htmlToTiptapContent: () => htmlToTiptapContent
|
|
34
35
|
});
|
|
35
36
|
module.exports = __toCommonJS(editor_exports);
|
|
36
37
|
|
|
@@ -1928,14 +1929,39 @@ var ImageDialog = ({
|
|
|
1928
1929
|
const [dragActive, setDragActive] = (0, import_react13.useState)(false);
|
|
1929
1930
|
const inputRef = (0, import_react13.useRef)(null);
|
|
1930
1931
|
const resolvedInitialUrl = initialAttrs ? resolveImageSrc({ fileId: initialAttrs.fileId, src: initialAttrs.src }, { getImageById }) : "";
|
|
1932
|
+
const getConstrainedDimensions = () => {
|
|
1933
|
+
if (!initialAttrs?.width || !initialAttrs?.height) {
|
|
1934
|
+
return { width: 0, height: 0 };
|
|
1935
|
+
}
|
|
1936
|
+
let maxWidth;
|
|
1937
|
+
try {
|
|
1938
|
+
const editorElement = document.querySelector(".tiptap-content-wrapper");
|
|
1939
|
+
if (editorElement && editorElement.clientWidth > 0) {
|
|
1940
|
+
maxWidth = editorElement.clientWidth - 32;
|
|
1941
|
+
}
|
|
1942
|
+
} catch {
|
|
1943
|
+
}
|
|
1944
|
+
if (maxWidth && initialAttrs.width > maxWidth) {
|
|
1945
|
+
const aspectRatio = initialAttrs.height / initialAttrs.width;
|
|
1946
|
+
return {
|
|
1947
|
+
width: maxWidth,
|
|
1948
|
+
height: Math.round(maxWidth * aspectRatio)
|
|
1949
|
+
};
|
|
1950
|
+
}
|
|
1951
|
+
return {
|
|
1952
|
+
width: initialAttrs.width,
|
|
1953
|
+
height: initialAttrs.height
|
|
1954
|
+
};
|
|
1955
|
+
};
|
|
1956
|
+
const constrainedDimensions = getConstrainedDimensions();
|
|
1931
1957
|
const [formState, setFormState] = (0, import_react13.useState)({
|
|
1932
1958
|
file: null,
|
|
1933
1959
|
title: initialAttrs?.title || "",
|
|
1934
1960
|
alt: initialAttrs?.alt || "",
|
|
1935
1961
|
caption: initialAttrs?.caption || "",
|
|
1936
1962
|
fileUrl: resolvedInitialUrl,
|
|
1937
|
-
width:
|
|
1938
|
-
height:
|
|
1963
|
+
width: constrainedDimensions.width,
|
|
1964
|
+
height: constrainedDimensions.height
|
|
1939
1965
|
});
|
|
1940
1966
|
const handleSelectFile = (file) => {
|
|
1941
1967
|
if (!file) return;
|
|
@@ -2038,7 +2064,9 @@ var ImageDialog = ({
|
|
|
2038
2064
|
onImageEdit({
|
|
2039
2065
|
alt: formState.alt,
|
|
2040
2066
|
title: formState.title,
|
|
2041
|
-
caption: formState.caption
|
|
2067
|
+
caption: formState.caption,
|
|
2068
|
+
width: formState.width || void 0,
|
|
2069
|
+
height: formState.height || void 0
|
|
2042
2070
|
});
|
|
2043
2071
|
handleClose();
|
|
2044
2072
|
};
|
|
@@ -5251,6 +5279,19 @@ var Figure2 = BaseFigure.extend({
|
|
|
5251
5279
|
if (maxWidth && naturalAspectRatio) {
|
|
5252
5280
|
maxHeight = Math.round(maxWidth * naturalAspectRatio);
|
|
5253
5281
|
}
|
|
5282
|
+
if (attrs.width && attrs.height && maxWidth && attrs.width > maxWidth) {
|
|
5283
|
+
const width = maxWidth;
|
|
5284
|
+
const height = Math.round(attrs.height / attrs.width * maxWidth);
|
|
5285
|
+
imageContainer.style.width = `${width}px`;
|
|
5286
|
+
imageContainer.style.height = `${height}px`;
|
|
5287
|
+
const pos = getPos();
|
|
5288
|
+
if (typeof pos === "number") {
|
|
5289
|
+
editor.chain().updateAttributes("image", {
|
|
5290
|
+
width: Math.round(width),
|
|
5291
|
+
height: Math.round(height)
|
|
5292
|
+
}).run();
|
|
5293
|
+
}
|
|
5294
|
+
}
|
|
5254
5295
|
};
|
|
5255
5296
|
imageContainer.appendChild(img);
|
|
5256
5297
|
if (editor.isEditable) {
|
|
@@ -6460,8 +6501,40 @@ var Tiptap = (props) => {
|
|
|
6460
6501
|
const translations2 = getTranslations(lang);
|
|
6461
6502
|
return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(TiptapTranslationsProvider, { translations: translations2, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(DialogCommandProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(TiptapContent, { ...props }) }) });
|
|
6462
6503
|
};
|
|
6504
|
+
|
|
6505
|
+
// src/utils/html-to-tiptap-content.ts
|
|
6506
|
+
var import_core19 = require("@tiptap/core");
|
|
6507
|
+
function isJSONContent(value) {
|
|
6508
|
+
return typeof value === "object" && value !== null && "type" in value && typeof value.type === "string";
|
|
6509
|
+
}
|
|
6510
|
+
function htmlToTiptapContent(content) {
|
|
6511
|
+
if (isJSONContent(content)) {
|
|
6512
|
+
return content;
|
|
6513
|
+
}
|
|
6514
|
+
if (typeof content === "string") {
|
|
6515
|
+
try {
|
|
6516
|
+
const parsed = JSON.parse(content);
|
|
6517
|
+
if (isJSONContent(parsed)) {
|
|
6518
|
+
return parsed;
|
|
6519
|
+
}
|
|
6520
|
+
} catch {
|
|
6521
|
+
}
|
|
6522
|
+
}
|
|
6523
|
+
if (!content || content.trim() === "") {
|
|
6524
|
+
return { type: "doc", content: [{ type: "paragraph" }] };
|
|
6525
|
+
}
|
|
6526
|
+
const sharedExtensions = getSharedExtensions();
|
|
6527
|
+
const extensions = [...sharedExtensions, BaseFigure];
|
|
6528
|
+
try {
|
|
6529
|
+
return (0, import_core19.generateJSON)(content, extensions);
|
|
6530
|
+
} catch (error) {
|
|
6531
|
+
console.error("Failed to convert HTML to Tiptap content:", error);
|
|
6532
|
+
return { type: "doc", content: [{ type: "paragraph" }] };
|
|
6533
|
+
}
|
|
6534
|
+
}
|
|
6463
6535
|
// Annotate the CommonJS export names for ESM import in node:
|
|
6464
6536
|
0 && (module.exports = {
|
|
6465
|
-
Tiptap
|
|
6537
|
+
Tiptap,
|
|
6538
|
+
htmlToTiptapContent
|
|
6466
6539
|
});
|
|
6467
6540
|
//# sourceMappingURL=editor.js.map
|