mirror of
https://github.com/streetwriters/notesnook.git
synced 2025-12-16 11:47:54 +01:00
chore: upgrade packages & fix task list
This commit is contained in:
thecodrr
3
packages/editor/.gitignore
vendored
3
packages/editor/.gitignore
vendored
@@ -1 +1,2 @@
|
||||
node_modules/
|
||||
node_modules/
|
||||
*.tsbuildinfo
|
||||
4
packages/editor/dist/components/menu/menu.js
vendored
4
packages/editor/dist/components/menu/menu.js
vendored
@@ -245,7 +245,9 @@ export function MenuPresenter(props) {
|
||||
return;
|
||||
repositionMenu(position);
|
||||
}, overlayElement: function (props, contentEl) {
|
||||
return (_jsx(Box, __assign({}, props, { style: __assign(__assign({}, props.style), { position: isAutocomplete ? "initial" : "fixed", zIndex: 1000, backgroundColor: isAutocomplete ? "transparent" : "unset" }) }, { children: contentEl })));
|
||||
return (_jsx(Box, __assign({}, props, {
|
||||
//@ts-ignore
|
||||
style: __assign(__assign({}, props.style), { position: isAutocomplete ? "initial" : "fixed", zIndex: 1000, backgroundColor: isAutocomplete ? "transparent" : "unset" }) }, { children: contentEl })));
|
||||
}, contentElement: function (props, children) { return (_jsx(Box, __assign({}, props, { style: {}, sx: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
/// <reference types="react" />
|
||||
import { MenuItem } from "./types";
|
||||
declare type MenuItemProps = {
|
||||
item: MenuItem;
|
||||
|
||||
@@ -36,7 +36,7 @@ function MenuItem(props) {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
} }, { children: [_jsxs(Flex, { children: [icon && (_jsx(Icon, { path: Icons[icon], color: "text", size: 15, sx: { mr: 2 } })), _jsx(Text, __assign({ as: "span", variant: "body" }, { children: title }))] }), _jsxs(Flex, { children: [isChecked && _jsx(Icon, { path: Icons.check, size: 14 }), (items === null || items === void 0 ? void 0 : items.length) && _jsx(Icon, { path: Icons.chevronRight, size: 14 }), modifier && (_jsx(Text, __assign({ as: "span", sx: {
|
||||
} }, { children: [_jsxs(Flex, { children: [icon && (_jsx(Icon, { path: Icons[icon], color: "text", size: "medium", sx: { mr: 2 } })), _jsx(Text, __assign({ as: "span", variant: "body" }, { children: title }))] }), _jsxs(Flex, { children: [isChecked && _jsx(Icon, { path: Icons.check, size: 14 }), (items === null || items === void 0 ? void 0 : items.length) && _jsx(Icon, { path: Icons.chevronRight, size: 14 }), modifier && (_jsx(Text, __assign({ as: "span", sx: {
|
||||
fontFamily: "body",
|
||||
fontSize: "menu",
|
||||
color: "fontTertiary",
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
/// <reference types="react" />
|
||||
import { IconNames } from "../../toolbar/icons";
|
||||
declare type MenuItemComponentProps = {
|
||||
onClick?: (e?: any) => void;
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
/// <reference types="react" />
|
||||
import { ToggleProps } from "react-toggle";
|
||||
import "react-toggle/style.css";
|
||||
export declare function Toggle(props: ToggleProps): JSX.Element;
|
||||
|
||||
@@ -10,7 +10,7 @@ var __values = (this && this.__values) || function(o) {
|
||||
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
|
||||
};
|
||||
import { Node, mergeAttributes } from "@tiptap/core";
|
||||
import { findChildren, ReactNodeViewRenderer } from "@tiptap/react";
|
||||
import { findChildren, ReactNodeViewRenderer } from "../react";
|
||||
import { AttachmentComponent } from "./component";
|
||||
export var AttachmentNode = Node.create({
|
||||
name: "attachment",
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
/// <reference types="react" />
|
||||
import { ImageProps } from "rebass";
|
||||
import { NodeViewProps } from "@tiptap/react";
|
||||
import { NodeViewProps } from "../react";
|
||||
export declare function AttachmentComponent(props: ImageProps & NodeViewProps): JSX.Element;
|
||||
|
||||
@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
|
||||
};
|
||||
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
||||
import { Box, Flex, Text } from "rebass";
|
||||
import { NodeViewWrapper } from "@tiptap/react";
|
||||
import { NodeViewWrapper } from "../react";
|
||||
import { ThemeProvider } from "emotion-theming";
|
||||
import { ToolButton } from "../../toolbar/components/tool-button";
|
||||
import { useRef } from "react";
|
||||
|
||||
@@ -68,8 +68,8 @@ export declare type CaretPosition = {
|
||||
selected?: number;
|
||||
total: number;
|
||||
};
|
||||
export declare function toCaretPosition(lines: CodeLine[], selection: Selection<any>): CaretPosition | undefined;
|
||||
export declare function getLines(node: ProsemirrorNode<any>): CodeLine[];
|
||||
export declare function toCaretPosition(lines: CodeLine[], selection: Selection): CaretPosition | undefined;
|
||||
export declare function getLines(node: ProsemirrorNode): CodeLine[];
|
||||
declare type CodeLine = {
|
||||
index: number;
|
||||
from: number;
|
||||
|
||||
@@ -36,7 +36,7 @@ var __values = (this && this.__values) || function(o) {
|
||||
};
|
||||
import { Node, textblockTypeInputRule, mergeAttributes } from "@tiptap/core";
|
||||
import { Plugin, PluginKey, TextSelection, } from "prosemirror-state";
|
||||
import { findParentNodeClosestToPos, ReactNodeViewRenderer, } from "@tiptap/react";
|
||||
import { findParentNodeClosestToPos, ReactNodeViewRenderer } from "../react";
|
||||
import { CodeblockComponent } from "./component";
|
||||
import { HighlighterPlugin } from "./highlighter";
|
||||
import detectIndent from "detect-indent";
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
/// <reference types="react" />
|
||||
import { NodeViewProps } from "@tiptap/react";
|
||||
import { NodeViewProps } from "../react";
|
||||
import "prism-themes/themes/prism-dracula.min.css";
|
||||
export declare function CodeblockComponent(props: NodeViewProps): JSX.Element;
|
||||
|
||||
@@ -62,7 +62,7 @@ var __read = (this && this.__read) || function (o, n) {
|
||||
return ar;
|
||||
};
|
||||
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
||||
import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
|
||||
import { NodeViewContent, NodeViewWrapper } from "../react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { loadLanguage } from "./loader";
|
||||
import { refractor } from "refractor/lib/core";
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { Plugin } from "prosemirror-state";
|
||||
import { DecorationSet } from "prosemirror-view";
|
||||
export declare function HighlighterPlugin({ name, defaultLanguage, }: {
|
||||
name: string;
|
||||
defaultLanguage: string | null | undefined;
|
||||
}): Plugin<any, any>;
|
||||
}): Plugin<DecorationSet>;
|
||||
|
||||
@@ -143,8 +143,9 @@ function getDecorations(_a) {
|
||||
}
|
||||
export function HighlighterPlugin(_a) {
|
||||
var name = _a.name, defaultLanguage = _a.defaultLanguage;
|
||||
var key = new PluginKey("highlighter");
|
||||
return new Plugin({
|
||||
key: new PluginKey("highlighter"),
|
||||
key: key,
|
||||
state: {
|
||||
init: function () {
|
||||
return DecorationSet.empty;
|
||||
@@ -185,7 +186,7 @@ export function HighlighterPlugin(_a) {
|
||||
},
|
||||
props: {
|
||||
decorations: function (state) {
|
||||
return this.getState(state);
|
||||
return key.getState(state);
|
||||
},
|
||||
},
|
||||
appendTransaction: function (transactions, _prevState, nextState) {
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
import hljs from "highlight.js/lib/core";
|
||||
import { Language } from "highlight.js";
|
||||
export { hljs };
|
||||
export declare function loadLanguage(shortName: string): Promise<Language | undefined>;
|
||||
export declare const LANGUAGES: ({
|
||||
name: string;
|
||||
shortname: string;
|
||||
aliases: string[];
|
||||
} | {
|
||||
name: string;
|
||||
shortname: string;
|
||||
aliases?: undefined;
|
||||
})[];
|
||||
@@ -1,339 +0,0 @@
|
||||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
||||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
||||
return new (P || (P = Promise))(function (resolve, reject) {
|
||||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
||||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
||||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
||||
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
||||
});
|
||||
};
|
||||
var __generator = (this && this.__generator) || function (thisArg, body) {
|
||||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
||||
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
||||
function verb(n) { return function (v) { return step([n, v]); }; }
|
||||
function step(op) {
|
||||
if (f) throw new TypeError("Generator is already executing.");
|
||||
while (_) try {
|
||||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
||||
if (y = 0, t) op = [op[0] & 2, t.value];
|
||||
switch (op[0]) {
|
||||
case 0: case 1: t = op; break;
|
||||
case 4: _.label++; return { value: op[1], done: false };
|
||||
case 5: _.label++; y = op[1]; op = [0]; continue;
|
||||
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
||||
default:
|
||||
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
||||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
||||
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
||||
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
||||
if (t[2]) _.ops.pop();
|
||||
_.trys.pop(); continue;
|
||||
}
|
||||
op = body.call(thisArg, _);
|
||||
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
||||
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
||||
}
|
||||
};
|
||||
import hljs from "highlight.js/lib/core";
|
||||
export { hljs };
|
||||
// load hljs into the editor window which can be the iframe
|
||||
// or the main window. This is required so language definitions
|
||||
// can be loaded.
|
||||
globalThis["hljs"] = hljs;
|
||||
// export type LanguageDefinition = {
|
||||
// name: string;
|
||||
// shortname: string;
|
||||
// aliases?: string[];
|
||||
// };
|
||||
var loadedLanguages = {};
|
||||
export function loadLanguage(shortName) {
|
||||
return __awaiter(this, void 0, void 0, function () {
|
||||
var url, lang;
|
||||
return __generator(this, function (_a) {
|
||||
switch (_a.label) {
|
||||
case 0:
|
||||
if (loadedLanguages[shortName])
|
||||
return [2 /*return*/, hljs.getLanguage(shortName)];
|
||||
url = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/languages/".concat(shortName, ".min.js");
|
||||
return [4 /*yield*/, loadScript(url)];
|
||||
case 1:
|
||||
_a.sent();
|
||||
lang = hljs.getLanguage(shortName);
|
||||
loadedLanguages[shortName] = lang;
|
||||
return [2 /*return*/, lang];
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
function loadScript(url) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
var script = document.createElement("script");
|
||||
script.src = url;
|
||||
// Append to the `head` element
|
||||
document.head.appendChild(script);
|
||||
script.addEventListener("load", function () {
|
||||
resolve(undefined);
|
||||
});
|
||||
script.addEventListener("error", function (error) {
|
||||
console.error(error);
|
||||
reject("Could not load script at url ".concat(url, "."));
|
||||
});
|
||||
});
|
||||
}
|
||||
export var LANGUAGES = [
|
||||
{ name: "Plain text", shortname: "plaintext", aliases: ["text", "txt"] },
|
||||
{
|
||||
name: "HTML, XML",
|
||||
shortname: "xml",
|
||||
aliases: [
|
||||
"html",
|
||||
"xhtml",
|
||||
"rss",
|
||||
"atom",
|
||||
"xjb",
|
||||
"xsd",
|
||||
"xsl",
|
||||
"plist",
|
||||
"wsf",
|
||||
"svg",
|
||||
],
|
||||
},
|
||||
{ name: "Bash", shortname: "bash", aliases: ["sh"] },
|
||||
{ name: "C", shortname: "c", aliases: ["h"] },
|
||||
{
|
||||
name: "C++",
|
||||
shortname: "cpp",
|
||||
aliases: ["cc", "c++", "h++", "hpp", "hh", "hxx", "cxx"],
|
||||
},
|
||||
{ name: "C#", shortname: "csharp", aliases: ["cs", "c#"] },
|
||||
{ name: "CSS", shortname: "css" },
|
||||
{ name: "Markdown", shortname: "markdown", aliases: ["md", "mkdown", "mkd"] },
|
||||
{ name: "Diff", shortname: "diff", aliases: ["patch"] },
|
||||
{
|
||||
name: "Ruby",
|
||||
shortname: "ruby",
|
||||
aliases: ["rb", "gemspec", "podspec", "thor", "irb"],
|
||||
},
|
||||
{ name: "Go", shortname: "go", aliases: ["golang"] },
|
||||
{ name: "TOML, also INI", shortname: "ini", aliases: ["toml"] },
|
||||
{ name: "Java", shortname: "java", aliases: ["jsp"] },
|
||||
{
|
||||
name: "Javascript",
|
||||
shortname: "javascript",
|
||||
aliases: ["js", "jsx", "mjs", "cjs"],
|
||||
},
|
||||
{ name: "JSON", shortname: "json" },
|
||||
{ name: "Kotlin", shortname: "kotlin", aliases: ["kt", "kts"] },
|
||||
{ name: "Less", shortname: "less" },
|
||||
{ name: "Lua", shortname: "lua" },
|
||||
{ name: "Makefile", shortname: "makefile", aliases: ["mk", "mak", "make"] },
|
||||
{ name: "Perl", shortname: "perl", aliases: ["pl", "pm"] },
|
||||
{
|
||||
name: "Objective-C",
|
||||
shortname: "objectivec",
|
||||
aliases: ["mm", "objc", "obj-c", "obj-c++", "objective-c++"],
|
||||
},
|
||||
{ name: "php", shortname: "php" },
|
||||
{ name: "PHP template", shortname: "php-template" },
|
||||
{ name: "Python", shortname: "python", aliases: ["py", "gyp", "ipython"] },
|
||||
{ name: "python-repl", shortname: "python-repl", aliases: ["pycon"] },
|
||||
{ name: "R", shortname: "r" },
|
||||
{ name: "Rust", shortname: "rust", aliases: ["rs"] },
|
||||
{ name: "SCSS", shortname: "scss" },
|
||||
{
|
||||
name: "Shell Session",
|
||||
shortname: "shell",
|
||||
aliases: ["console", "shellsession"],
|
||||
},
|
||||
{ name: "SQL", shortname: "sql" },
|
||||
{ name: "Swift", shortname: "swift" },
|
||||
{ name: "YAML", shortname: "yaml", aliases: ["yml"] },
|
||||
{ name: "TypeScript", shortname: "typescript", aliases: ["ts", "tsx"] },
|
||||
{ name: "Visual Basic .NET", shortname: "vbnet", aliases: ["vb"] },
|
||||
{ name: "1C:Enterprise", shortname: "1c" },
|
||||
{ name: "Augmented Backus-Naur Form", shortname: "abnf" },
|
||||
{ name: "Apache Access Log", shortname: "accesslog" },
|
||||
{ name: "ActionScript", shortname: "actionscript", aliases: ["as"] },
|
||||
{ name: "Ada", shortname: "ada" },
|
||||
{ name: "AngelScript", shortname: "angelscript", aliases: ["asc"] },
|
||||
{ name: "Apache config", shortname: "apache", aliases: ["apacheconf"] },
|
||||
{ name: "AppleScript", shortname: "applescript", aliases: ["osascript"] },
|
||||
{ name: "ArcGIS Arcade", shortname: "arcade" },
|
||||
{ name: "Arduino", shortname: "arduino", aliases: ["ino"] },
|
||||
{ name: "ARM Assembly", shortname: "armasm", aliases: ["arm"] },
|
||||
{ name: "AsciiDoc", shortname: "asciidoc", aliases: ["adoc"] },
|
||||
{ name: "AspectJ", shortname: "aspectj" },
|
||||
{ name: "AutoHotkey", shortname: "autohotkey", aliases: ["ahk"] },
|
||||
{ name: "AutoIt", shortname: "autoit" },
|
||||
{ name: "AVR Assembly", shortname: "avrasm" },
|
||||
{ name: "Awk", shortname: "awk" },
|
||||
{ name: "X++", shortname: "axapta", aliases: ["x++"] },
|
||||
{ name: "BASIC", shortname: "basic" },
|
||||
{ name: "Backus–Naur Form", shortname: "bnf" },
|
||||
{ name: "Brainfuck", shortname: "brainfuck", aliases: ["bf"] },
|
||||
{ name: "C/AL", shortname: "cal" },
|
||||
{ name: "Cap’n Proto", shortname: "capnproto", aliases: ["capnp"] },
|
||||
{ name: "Ceylon", shortname: "ceylon" },
|
||||
{ name: "Clean", shortname: "clean", aliases: ["icl", "dcl"] },
|
||||
{ name: "Clojure", shortname: "clojure", aliases: ["clj", "edn"] },
|
||||
{ name: "Clojure REPL", shortname: "clojure-repl" },
|
||||
{ name: "CMake", shortname: "cmake", aliases: ["cmake.in"] },
|
||||
{
|
||||
name: "CoffeeScript",
|
||||
shortname: "coffeescript",
|
||||
aliases: ["coffee", "cson", "iced"],
|
||||
},
|
||||
{ name: "Coq", shortname: "coq" },
|
||||
{ name: "Caché Object Script", shortname: "cos", aliases: ["cls"] },
|
||||
{ name: "crmsh", shortname: "crmsh", aliases: ["crm", "pcmk"] },
|
||||
{ name: "Crystal", shortname: "crystal", aliases: ["cr"] },
|
||||
{ name: "CSP", shortname: "csp" },
|
||||
{ name: "D", shortname: "d" },
|
||||
{ name: "Dart", shortname: "dart" },
|
||||
{
|
||||
name: "Delphi",
|
||||
shortname: "delphi",
|
||||
aliases: ["dpr", "dfm", "pas", "pascal"],
|
||||
},
|
||||
{ name: "Django", shortname: "django", aliases: ["jinja"] },
|
||||
{ name: "DNS Zone", shortname: "dns", aliases: ["bind", "zone"] },
|
||||
{ name: "Dockerfile", shortname: "dockerfile", aliases: ["docker"] },
|
||||
{ name: "Batch file (DOS)", shortname: "dos", aliases: ["bat", "cmd"] },
|
||||
{ name: "dsconfig", shortname: "dsconfig" },
|
||||
{ name: "Device Tree", shortname: "dts" },
|
||||
{ name: "Dust", shortname: "dust", aliases: ["dst"] },
|
||||
{ name: "Extended Backus-Naur Form", shortname: "ebnf" },
|
||||
{ name: "Elixir", shortname: "elixir", aliases: ["ex", "exs"] },
|
||||
{ name: "Elm", shortname: "elm" },
|
||||
{ name: "ERB", shortname: "erb" },
|
||||
{ name: "Erlang REPL", shortname: "erlang-repl" },
|
||||
{ name: "Erlang", shortname: "erlang", aliases: ["erl"] },
|
||||
{ name: "Excel formulae", shortname: "excel", aliases: ["xlsx", "xls"] },
|
||||
{ name: "FIX", shortname: "fix" },
|
||||
{ name: "Flix", shortname: "flix" },
|
||||
{ name: "Fortran", shortname: "fortran", aliases: ["f90", "f95"] },
|
||||
{ name: "F#", shortname: "fsharp", aliases: ["fs", "f#"] },
|
||||
{ name: "GAMS", shortname: "gams", aliases: ["gms"] },
|
||||
{ name: "GAUSS", shortname: "gauss", aliases: ["gss"] },
|
||||
{ name: "G-code (ISO 6983)", shortname: "gcode", aliases: ["nc"] },
|
||||
{ name: "Gherkin", shortname: "gherkin", aliases: ["feature"] },
|
||||
{ name: "GLSL", shortname: "glsl" },
|
||||
{ name: "GML", shortname: "gml" },
|
||||
{ name: "Golo", shortname: "golo" },
|
||||
{ name: "Gradle", shortname: "gradle" },
|
||||
{ name: "Groovy", shortname: "groovy" },
|
||||
{ name: "HAML", shortname: "haml" },
|
||||
{
|
||||
name: "Handlebars",
|
||||
shortname: "handlebars",
|
||||
aliases: ["hbs", "html.hbs", "html.handlebars", "htmlbars"],
|
||||
},
|
||||
{ name: "Haskell", shortname: "haskell", aliases: ["hs"] },
|
||||
{ name: "Haxe", shortname: "haxe", aliases: ["hx"] },
|
||||
{ name: "HSP", shortname: "hsp" },
|
||||
{ name: "HTTP", shortname: "http", aliases: ["https"] },
|
||||
{ name: "Hy", shortname: "hy", aliases: ["hylang"] },
|
||||
{ name: "Inform 7", shortname: "inform7", aliases: ["i7"] },
|
||||
{ name: "IRPF90", shortname: "irpf90" },
|
||||
{ name: "ISBL", shortname: "isbl" },
|
||||
{ name: "JBoss CLI", shortname: "jboss-cli", aliases: ["wildfly-cli"] },
|
||||
{ name: "Julia", shortname: "julia" },
|
||||
{ name: "Julia REPL", shortname: "julia-repl", aliases: ["jldoctest"] },
|
||||
{ name: "Lasso", shortname: "lasso", aliases: ["ls", "lassoscript"] },
|
||||
{ name: "LaTeX", shortname: "latex", aliases: ["tex"] },
|
||||
{ name: "LDIF", shortname: "ldif" },
|
||||
{ name: "Leaf", shortname: "leaf" },
|
||||
{ name: "Lisp", shortname: "lisp" },
|
||||
{ name: "LiveCode", shortname: "livecodeserver" },
|
||||
{ name: "LiveScript", shortname: "livescript", aliases: ["ls"] },
|
||||
{ name: "LLVM IR", shortname: "llvm" },
|
||||
{ name: "LSL (Linden Scripting Language)", shortname: "lsl" },
|
||||
{ name: "Mathematica", shortname: "mathematica", aliases: ["mma", "wl"] },
|
||||
{ name: "Matlab", shortname: "matlab" },
|
||||
{ name: "Maxima", shortname: "maxima" },
|
||||
{ name: "MEL", shortname: "mel" },
|
||||
{ name: "Mercury", shortname: "mercury", aliases: ["m", "moo"] },
|
||||
{ name: "MIPS Assembly", shortname: "mipsasm", aliases: ["mips"] },
|
||||
{ name: "Mizar", shortname: "mizar" },
|
||||
{ name: "Mojolicious", shortname: "mojolicious" },
|
||||
{ name: "Monkey", shortname: "monkey" },
|
||||
{ name: "MoonScript", shortname: "moonscript", aliases: ["moon"] },
|
||||
{ name: "N1QL", shortname: "n1ql" },
|
||||
{ name: "Nested Text", shortname: "nestedtext", aliases: ["nt"] },
|
||||
{ name: "Nginx config", shortname: "nginx", aliases: ["nginxconf"] },
|
||||
{ name: "Nim", shortname: "nim" },
|
||||
{ name: "Nix", shortname: "nix", aliases: ["nixos"] },
|
||||
{ name: "Node REPL", shortname: "node-repl" },
|
||||
{ name: "NSIS", shortname: "nsis" },
|
||||
{ name: "OCaml", shortname: "ocaml", aliases: ["ml"] },
|
||||
{ name: "OpenSCAD", shortname: "openscad", aliases: ["scad"] },
|
||||
{ name: "Oxygene", shortname: "oxygene" },
|
||||
{ name: "Parser3", shortname: "parser3" },
|
||||
{ name: "Packet Filter config", shortname: "pf", aliases: ["pf.conf"] },
|
||||
{
|
||||
name: "PostgreSQL",
|
||||
shortname: "pgsql",
|
||||
aliases: ["postgres", "postgresql"],
|
||||
},
|
||||
{ name: "Pony", shortname: "pony" },
|
||||
{
|
||||
name: "PowerShell",
|
||||
shortname: "powershell",
|
||||
aliases: ["pwsh", "ps", "ps1"],
|
||||
},
|
||||
{ name: "Processing", shortname: "processing", aliases: ["pde"] },
|
||||
{ name: "Python profiler", shortname: "profile" },
|
||||
{ name: "Prolog", shortname: "prolog" },
|
||||
{ name: ".properties", shortname: "properties" },
|
||||
{ name: "Protocol Buffers", shortname: "protobuf" },
|
||||
{ name: "Puppet", shortname: "puppet", aliases: ["pp"] },
|
||||
{ name: "PureBASIC", shortname: "purebasic", aliases: ["pb", "pbi"] },
|
||||
{ name: "Q", shortname: "q", aliases: ["k", "kdb"] },
|
||||
{ name: "QML", shortname: "qml", aliases: ["qt"] },
|
||||
{ name: "ReasonML", shortname: "reasonml", aliases: ["re"] },
|
||||
{ name: "RenderMan RIB", shortname: "rib" },
|
||||
{ name: "Roboconf", shortname: "roboconf", aliases: ["graph", "instances"] },
|
||||
{
|
||||
name: "Microtik RouterOS script",
|
||||
shortname: "routeros",
|
||||
aliases: ["mikrotik"],
|
||||
},
|
||||
{ name: "RenderMan RSL", shortname: "rsl" },
|
||||
{ name: "Oracle Rules Language", shortname: "ruleslanguage" },
|
||||
{ name: "SAS", shortname: "sas" },
|
||||
{ name: "Scala", shortname: "scala" },
|
||||
{ name: "Scheme", shortname: "scheme" },
|
||||
{ name: "Scilab", shortname: "scilab", aliases: ["sci"] },
|
||||
{ name: "Smali", shortname: "smali" },
|
||||
{ name: "Smalltalk", shortname: "smalltalk", aliases: ["st"] },
|
||||
{ name: "SML (Standard ML)", shortname: "sml", aliases: ["ml"] },
|
||||
{ name: "SQF", shortname: "sqf" },
|
||||
{ name: "Stan", shortname: "stan", aliases: ["stanfuncs"] },
|
||||
{ name: "Stata", shortname: "stata", aliases: ["do", "ado"] },
|
||||
{
|
||||
name: "STEP Part 21",
|
||||
shortname: "step21",
|
||||
aliases: ["p21", "step", "stp"],
|
||||
},
|
||||
{ name: "Stylus", shortname: "stylus", aliases: ["styl"] },
|
||||
{ name: "SubUnit", shortname: "subunit" },
|
||||
{ name: "Tagger Script", shortname: "taggerscript" },
|
||||
{ name: "Test Anything Protocol", shortname: "tap" },
|
||||
{ name: "Tcl", shortname: "tcl", aliases: ["tk"] },
|
||||
{ name: "Thrift", shortname: "thrift" },
|
||||
{ name: "TP", shortname: "tp" },
|
||||
{ name: "Twig", shortname: "twig", aliases: ["craftcms"] },
|
||||
{ name: "Vala", shortname: "vala" },
|
||||
{ name: "Visual Basic .NET", shortname: "vbnet", aliases: ["vb"] },
|
||||
{ name: "VBScript", shortname: "vbscript", aliases: ["vbs"] },
|
||||
{ name: "VBScript in HTML", shortname: "vbscript-html" },
|
||||
{ name: "Verilog", shortname: "verilog", aliases: ["v", "sv", "svh"] },
|
||||
{ name: "VHDL", shortname: "vhdl" },
|
||||
{ name: "Vim Script", shortname: "vim" },
|
||||
{ name: "WebAssembly", shortname: "wasm" },
|
||||
{ name: "Wren", shortname: "wren" },
|
||||
{ name: "Intel x86 Assembly", shortname: "x86asm" },
|
||||
{ name: "XL", shortname: "xl", aliases: ["tao"] },
|
||||
{ name: "XQuery", shortname: "xquery", aliases: ["xpath", "xq"] },
|
||||
{ name: "Zephir", shortname: "zephir", aliases: ["zep"] },
|
||||
];
|
||||
@@ -1,3 +1,3 @@
|
||||
import { Plugin } from "prosemirror-state";
|
||||
import { DropcursorOptions } from "./drop-cursor";
|
||||
export declare function dropCursor(options?: DropcursorOptions): Plugin<any, any>;
|
||||
export declare function dropCursor(options?: DropcursorOptions): Plugin<any>;
|
||||
|
||||
@@ -1,3 +1,2 @@
|
||||
/// <reference types="react" />
|
||||
import { NodeViewProps } from "@tiptap/react";
|
||||
import { NodeViewProps } from "../react";
|
||||
export declare function EmbedComponent(props: NodeViewProps): JSX.Element;
|
||||
|
||||
@@ -27,12 +27,12 @@ var __read = (this && this.__read) || function (o, n) {
|
||||
};
|
||||
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
||||
import { Box, Flex } from "rebass";
|
||||
import { NodeViewWrapper } from "@tiptap/react";
|
||||
import { NodeViewWrapper } from "../react";
|
||||
import { ThemeProvider } from "emotion-theming";
|
||||
import { Resizable } from "re-resizable";
|
||||
import { ToolButton } from "../../toolbar/components/tool-button";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { PopupPresenter, } from "../../components/menu/menu";
|
||||
import { PopupPresenter } from "../../components/menu/menu";
|
||||
import { EmbedPopup } from "../../toolbar/popups/embed-popup";
|
||||
export function EmbedComponent(props) {
|
||||
var _a = props.node.attrs, src = _a.src, width = _a.width, height = _a.height, align = _a.align;
|
||||
|
||||
@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
import { Node, mergeAttributes } from "@tiptap/core";
|
||||
import { ReactNodeViewRenderer } from "@tiptap/react";
|
||||
import { ReactNodeViewRenderer } from "../react";
|
||||
import { EmbedComponent } from "./component";
|
||||
export var EmbedNode = Node.create({
|
||||
name: "embed",
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
/// <reference types="react" />
|
||||
import { ImageProps } from "rebass";
|
||||
import { NodeViewProps } from "@tiptap/react";
|
||||
import { NodeViewProps } from "../react";
|
||||
export declare function ImageComponent(props: ImageProps & NodeViewProps): JSX.Element;
|
||||
|
||||
@@ -27,12 +27,12 @@ var __read = (this && this.__read) || function (o, n) {
|
||||
};
|
||||
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
||||
import { Box, Flex, Image } from "rebass";
|
||||
import { NodeViewWrapper } from "@tiptap/react";
|
||||
import { NodeViewWrapper } from "../react";
|
||||
import { ThemeProvider } from "emotion-theming";
|
||||
import { Resizable } from "re-resizable";
|
||||
import { ToolButton } from "../../toolbar/components/tool-button";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { PopupPresenter, } from "../../components/menu/menu";
|
||||
import { PopupPresenter } from "../../components/menu/menu";
|
||||
import { Popup } from "../../toolbar/components/popup";
|
||||
import { ImageProperties } from "../../toolbar/popups/image-properties";
|
||||
export function ImageComponent(props) {
|
||||
|
||||
@@ -26,7 +26,7 @@ var __read = (this && this.__read) || function (o, n) {
|
||||
return ar;
|
||||
};
|
||||
import { Node, nodeInputRule, mergeAttributes } from "@tiptap/core";
|
||||
import { ReactNodeViewRenderer } from "@tiptap/react";
|
||||
import { ReactNodeViewRenderer } from "../react";
|
||||
import { ImageComponent } from "./component";
|
||||
export var inputRegex = /(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/;
|
||||
export var ImageNode = Node.create({
|
||||
|
||||
3
packages/editor/dist/extensions/listitem/commands.d.ts
vendored
Normal file
3
packages/editor/dist/extensions/listitem/commands.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { NodeType } from "prosemirror-model";
|
||||
import { Editor } from "@tiptap/core";
|
||||
export declare function onBackspacePressed(editor: Editor, name: string, type: NodeType): boolean;
|
||||
54
packages/editor/dist/extensions/listitem/commands.js
vendored
Normal file
54
packages/editor/dist/extensions/listitem/commands.js
vendored
Normal file
@@ -0,0 +1,54 @@
|
||||
import { findParentNodeOfType, hasParentNodeOfType } from "prosemirror-utils";
|
||||
// WORKAROUND: if we're at the start of a list item, we need to either
|
||||
// backspace directly to an empty list item above, or outdent this node
|
||||
export function onBackspacePressed(editor, name, type) {
|
||||
var selection = editor.state.selection;
|
||||
var empty = selection.empty, $from = selection.$from;
|
||||
if (!empty ||
|
||||
!isInside(name, type, editor.state) ||
|
||||
$from.parentOffset !== 0 ||
|
||||
!isFirstChildOfParent(editor.state) ||
|
||||
!editor.can().liftListItem(type))
|
||||
return false;
|
||||
var isEmpty = isListItemEmpty(type, editor.state);
|
||||
if (isFirstOfType(type, editor.state)) {
|
||||
return editor.commands.liftListItem(type);
|
||||
}
|
||||
else if (isEmpty)
|
||||
return editor.commands.deleteNode(type);
|
||||
else {
|
||||
// we have to run join backward twice because on the first join
|
||||
// the two list items are joined i.e., the editor just puts their
|
||||
// paragraphs next to each other. The next join merges the paragraphs
|
||||
// like it should be.
|
||||
return editor.chain().joinBackward().joinBackward().run();
|
||||
}
|
||||
}
|
||||
function isInside(name, type, state) {
|
||||
var $from = state.selection.$from;
|
||||
var node = type || state.schema.nodes[name];
|
||||
var paragraph = state.schema.nodes.paragraph;
|
||||
return (hasParentNodeOfType(node)(state.selection) &&
|
||||
$from.parent.type === paragraph);
|
||||
}
|
||||
function isFirstChildOfParent(state) {
|
||||
var $from = state.selection.$from;
|
||||
return $from.depth > 1
|
||||
? $from.parentOffset === 0 || $from.index($from.depth - 1) === 0
|
||||
: true;
|
||||
}
|
||||
var isFirstOfType = function (type, state) {
|
||||
var block = findParentNodeOfType(type)(state.selection);
|
||||
if (!block)
|
||||
return false;
|
||||
var pos = block.pos;
|
||||
var resolved = state.doc.resolve(pos);
|
||||
return !resolved.nodeBefore;
|
||||
};
|
||||
function isListItemEmpty(type, state) {
|
||||
var block = findParentNodeOfType(type)(state.selection);
|
||||
if (!block)
|
||||
return false;
|
||||
var node = block.node;
|
||||
return !node.textContent.length;
|
||||
}
|
||||
1
packages/editor/dist/extensions/listitem/index.d.ts
vendored
Normal file
1
packages/editor/dist/extensions/listitem/index.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export * from "./list-item";
|
||||
1
packages/editor/dist/extensions/listitem/index.js
vendored
Normal file
1
packages/editor/dist/extensions/listitem/index.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export * from "./list-item";
|
||||
1
packages/editor/dist/extensions/listitem/listitem.d.ts
vendored
Normal file
1
packages/editor/dist/extensions/listitem/listitem.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export declare const ListItem: import("@tiptap/core").Node<import("@tiptap/extension-list-item").ListItemOptions, any>;
|
||||
23
packages/editor/dist/extensions/listitem/listitem.js
vendored
Normal file
23
packages/editor/dist/extensions/listitem/listitem.js
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
var __assign = (this && this.__assign) || function () {
|
||||
__assign = Object.assign || function(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||
t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
import { ListItem as TiptapListItem } from "@tiptap/extension-list-item";
|
||||
import { onBackspacePressed } from "./commands";
|
||||
export var ListItem = TiptapListItem.extend({
|
||||
addKeyboardShortcuts: function () {
|
||||
var _this = this;
|
||||
var _a;
|
||||
return __assign(__assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { Backspace: function (_a) {
|
||||
var editor = _a.editor;
|
||||
return onBackspacePressed(editor, _this.name, _this.type);
|
||||
} });
|
||||
},
|
||||
});
|
||||
6
packages/editor/dist/extensions/react/Editor.d.ts
vendored
Normal file
6
packages/editor/dist/extensions/react/Editor.d.ts
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Editor as CoreEditor } from '@tiptap/core';
|
||||
import { EditorContentProps, EditorContentState } from './EditorContent';
|
||||
export declare class Editor extends CoreEditor {
|
||||
contentComponent: React.Component<EditorContentProps, EditorContentState> | null;
|
||||
}
|
||||
26
packages/editor/dist/extensions/react/Editor.js
vendored
Normal file
26
packages/editor/dist/extensions/react/Editor.js
vendored
Normal file
@@ -0,0 +1,26 @@
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
var extendStatics = function (d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
};
|
||||
return function (d, b) {
|
||||
if (typeof b !== "function" && b !== null)
|
||||
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
})();
|
||||
import { Editor as CoreEditor } from '@tiptap/core';
|
||||
var Editor = /** @class */ (function (_super) {
|
||||
__extends(Editor, _super);
|
||||
function Editor() {
|
||||
var _this = _super !== null && _super.apply(this, arguments) || this;
|
||||
_this.contentComponent = null;
|
||||
return _this;
|
||||
}
|
||||
return Editor;
|
||||
}(CoreEditor));
|
||||
export { Editor };
|
||||
19
packages/editor/dist/extensions/react/EditorContent.d.ts
vendored
Normal file
19
packages/editor/dist/extensions/react/EditorContent.d.ts
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
import React, { HTMLProps } from 'react';
|
||||
import { Editor } from './Editor';
|
||||
import { ReactRenderer } from './ReactRenderer';
|
||||
export interface EditorContentProps extends HTMLProps<HTMLDivElement> {
|
||||
editor: Editor | null;
|
||||
}
|
||||
export interface EditorContentState {
|
||||
renderers: Map<string, ReactRenderer>;
|
||||
}
|
||||
export declare class PureEditorContent extends React.Component<EditorContentProps, EditorContentState> {
|
||||
editorContentRef: React.RefObject<any>;
|
||||
constructor(props: EditorContentProps);
|
||||
componentDidMount(): void;
|
||||
componentDidUpdate(): void;
|
||||
init(): void;
|
||||
componentWillUnmount(): void;
|
||||
render(): JSX.Element;
|
||||
}
|
||||
export declare const EditorContent: React.MemoExoticComponent<typeof PureEditorContent>;
|
||||
131
packages/editor/dist/extensions/react/EditorContent.js
vendored
Normal file
131
packages/editor/dist/extensions/react/EditorContent.js
vendored
Normal file
@@ -0,0 +1,131 @@
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
var extendStatics = function (d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
};
|
||||
return function (d, b) {
|
||||
if (typeof b !== "function" && b !== null)
|
||||
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
})();
|
||||
var __assign = (this && this.__assign) || function () {
|
||||
__assign = Object.assign || function(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||
t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
var __rest = (this && this.__rest) || function (s, e) {
|
||||
var t = {};
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||
t[p] = s[p];
|
||||
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||
t[p[i]] = s[p[i]];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
var __read = (this && this.__read) || function (o, n) {
|
||||
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
||||
if (!m) return o;
|
||||
var i = m.call(o), r, ar = [], e;
|
||||
try {
|
||||
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
||||
}
|
||||
catch (error) { e = { error: error }; }
|
||||
finally {
|
||||
try {
|
||||
if (r && !r.done && (m = i["return"])) m.call(i);
|
||||
}
|
||||
finally { if (e) throw e.error; }
|
||||
}
|
||||
return ar;
|
||||
};
|
||||
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
||||
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
||||
if (ar || !(i in from)) {
|
||||
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
||||
ar[i] = from[i];
|
||||
}
|
||||
}
|
||||
return to.concat(ar || Array.prototype.slice.call(from));
|
||||
};
|
||||
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
var Portals = function (_a) {
|
||||
var renderers = _a.renderers;
|
||||
return (_jsx(_Fragment, { children: Array.from(renderers).map(function (_a) {
|
||||
var _b = __read(_a, 2), key = _b[0], renderer = _b[1];
|
||||
return ReactDOM.createPortal(renderer.reactElement, renderer.element, key);
|
||||
}) }));
|
||||
};
|
||||
var PureEditorContent = /** @class */ (function (_super) {
|
||||
__extends(PureEditorContent, _super);
|
||||
function PureEditorContent(props) {
|
||||
var _this = _super.call(this, props) || this;
|
||||
_this.editorContentRef = React.createRef();
|
||||
_this.state = {
|
||||
renderers: new Map(),
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
PureEditorContent.prototype.componentDidMount = function () {
|
||||
this.init();
|
||||
};
|
||||
PureEditorContent.prototype.componentDidUpdate = function () {
|
||||
this.init();
|
||||
};
|
||||
PureEditorContent.prototype.init = function () {
|
||||
var editor = this.props.editor;
|
||||
if (editor && editor.options.element) {
|
||||
if (editor.contentComponent) {
|
||||
return;
|
||||
}
|
||||
var element = this.editorContentRef.current;
|
||||
element.append.apply(element, __spreadArray([], __read(editor.options.element.childNodes), false));
|
||||
editor.setOptions({
|
||||
element: element,
|
||||
});
|
||||
editor.contentComponent = this;
|
||||
editor.createNodeViews();
|
||||
}
|
||||
};
|
||||
PureEditorContent.prototype.componentWillUnmount = function () {
|
||||
var editor = this.props.editor;
|
||||
if (!editor) {
|
||||
return;
|
||||
}
|
||||
if (!editor.isDestroyed) {
|
||||
editor.view.setProps({
|
||||
nodeViews: {},
|
||||
});
|
||||
}
|
||||
editor.contentComponent = null;
|
||||
if (!editor.options.element.firstChild) {
|
||||
return;
|
||||
}
|
||||
var newElement = document.createElement('div');
|
||||
newElement.append.apply(newElement, __spreadArray([], __read(editor.options.element.childNodes), false));
|
||||
editor.setOptions({
|
||||
element: newElement,
|
||||
});
|
||||
};
|
||||
PureEditorContent.prototype.render = function () {
|
||||
var _a = this.props, editor = _a.editor, rest = __rest(_a, ["editor"]);
|
||||
return (_jsxs(_Fragment, { children: [_jsx("div", __assign({ ref: this.editorContentRef }, rest)), _jsx(Portals, { renderers: this.state.renderers })] }));
|
||||
};
|
||||
return PureEditorContent;
|
||||
}(React.Component));
|
||||
export { PureEditorContent };
|
||||
export var EditorContent = React.memo(PureEditorContent);
|
||||
6
packages/editor/dist/extensions/react/NodeViewContent.d.ts
vendored
Normal file
6
packages/editor/dist/extensions/react/NodeViewContent.d.ts
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
import React from "react";
|
||||
export interface NodeViewContentProps {
|
||||
[key: string]: any;
|
||||
as?: React.ElementType;
|
||||
}
|
||||
export declare const NodeViewContent: React.FC<NodeViewContentProps>;
|
||||
30
packages/editor/dist/extensions/react/NodeViewContent.js
vendored
Normal file
30
packages/editor/dist/extensions/react/NodeViewContent.js
vendored
Normal file
@@ -0,0 +1,30 @@
|
||||
var __assign = (this && this.__assign) || function () {
|
||||
__assign = Object.assign || function(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||
t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
var __rest = (this && this.__rest) || function (s, e) {
|
||||
var t = {};
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||
t[p] = s[p];
|
||||
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||
t[p[i]] = s[p[i]];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
import { useReactNodeView } from "./useReactNodeView";
|
||||
export var NodeViewContent = function (_a) {
|
||||
var as = _a.as, props = __rest(_a, ["as"]);
|
||||
var Tag = as || "div";
|
||||
var nodeViewContentRef = useReactNodeView().nodeViewContentRef;
|
||||
return (_jsx(Tag, __assign({}, props, { ref: nodeViewContentRef, "data-node-view-content": "", style: __assign(__assign({}, props.style), { whiteSpace: "pre-wrap" }) })));
|
||||
};
|
||||
6
packages/editor/dist/extensions/react/NodeViewWrapper.d.ts
vendored
Normal file
6
packages/editor/dist/extensions/react/NodeViewWrapper.d.ts
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
import React from 'react';
|
||||
export interface NodeViewWrapperProps {
|
||||
[key: string]: any;
|
||||
as?: React.ElementType;
|
||||
}
|
||||
export declare const NodeViewWrapper: React.FC<NodeViewWrapperProps>;
|
||||
19
packages/editor/dist/extensions/react/NodeViewWrapper.js
vendored
Normal file
19
packages/editor/dist/extensions/react/NodeViewWrapper.js
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
var __assign = (this && this.__assign) || function () {
|
||||
__assign = Object.assign || function(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||
t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
import React from 'react';
|
||||
import { useReactNodeView } from './useReactNodeView';
|
||||
export var NodeViewWrapper = React.forwardRef(function (props, ref) {
|
||||
var onDragStart = useReactNodeView().onDragStart;
|
||||
var Tag = props.as || 'div';
|
||||
return (_jsx(Tag, __assign({}, props, { ref: ref, "data-node-view-wrapper": "", onDragStart: onDragStart, style: __assign(__assign({}, props.style), { whiteSpace: 'normal' }) })));
|
||||
});
|
||||
15
packages/editor/dist/extensions/react/ReactNodeViewRenderer.d.ts
vendored
Normal file
15
packages/editor/dist/extensions/react/ReactNodeViewRenderer.d.ts
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
import { NodeViewRenderer, NodeViewRendererOptions } from "@tiptap/core";
|
||||
import { Decoration } from "prosemirror-view";
|
||||
import { Node as ProseMirrorNode } from "prosemirror-model";
|
||||
export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
|
||||
update: ((props: {
|
||||
oldNode: ProseMirrorNode;
|
||||
oldDecorations: Decoration[];
|
||||
newNode: ProseMirrorNode;
|
||||
newDecorations: Decoration[];
|
||||
updateProps: () => void;
|
||||
}) => boolean) | null;
|
||||
as?: string;
|
||||
className?: string;
|
||||
}
|
||||
export declare function ReactNodeViewRenderer(component: any, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer;
|
||||
194
packages/editor/dist/extensions/react/ReactNodeViewRenderer.js
vendored
Normal file
194
packages/editor/dist/extensions/react/ReactNodeViewRenderer.js
vendored
Normal file
@@ -0,0 +1,194 @@
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
var extendStatics = function (d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
};
|
||||
return function (d, b) {
|
||||
if (typeof b !== "function" && b !== null)
|
||||
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
})();
|
||||
var __assign = (this && this.__assign) || function () {
|
||||
__assign = Object.assign || function(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||
t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
var __read = (this && this.__read) || function (o, n) {
|
||||
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
||||
if (!m) return o;
|
||||
var i = m.call(o), r, ar = [], e;
|
||||
try {
|
||||
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
||||
}
|
||||
catch (error) { e = { error: error }; }
|
||||
finally {
|
||||
try {
|
||||
if (r && !r.done && (m = i["return"])) m.call(i);
|
||||
}
|
||||
finally { if (e) throw e.error; }
|
||||
}
|
||||
return ar;
|
||||
};
|
||||
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
||||
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
||||
if (ar || !(i in from)) {
|
||||
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
||||
ar[i] = from[i];
|
||||
}
|
||||
}
|
||||
return to.concat(ar || Array.prototype.slice.call(from));
|
||||
};
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
import { NodeView, } from "@tiptap/core";
|
||||
import { ReactRenderer } from "./ReactRenderer";
|
||||
import { ReactNodeViewContext, } from "./useReactNodeView";
|
||||
var ReactNodeView = /** @class */ (function (_super) {
|
||||
__extends(ReactNodeView, _super);
|
||||
function ReactNodeView() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
ReactNodeView.prototype.mount = function () {
|
||||
var _this = this;
|
||||
var props = {
|
||||
editor: this.editor,
|
||||
node: this.node,
|
||||
decorations: this.decorations,
|
||||
selected: false,
|
||||
extension: this.extension,
|
||||
getPos: function () { return _this.getPos(); },
|
||||
updateAttributes: function (attributes) {
|
||||
if (attributes === void 0) { attributes = {}; }
|
||||
return _this.updateAttributes(attributes);
|
||||
},
|
||||
deleteNode: function () { return _this.deleteNode(); },
|
||||
};
|
||||
if (!this.component.displayName) {
|
||||
var capitalizeFirstChar = function (string) {
|
||||
return string.charAt(0).toUpperCase() + string.substring(1);
|
||||
};
|
||||
this.component.displayName = capitalizeFirstChar(this.extension.name);
|
||||
}
|
||||
var ReactNodeViewProvider = function (componentProps) {
|
||||
var Component = _this.component;
|
||||
var onDragStart = _this.onDragStart.bind(_this);
|
||||
var nodeViewContentRef = function (element) {
|
||||
if (element &&
|
||||
_this.contentDOMElement &&
|
||||
element.firstChild !== _this.contentDOMElement) {
|
||||
element.appendChild(_this.contentDOMElement);
|
||||
}
|
||||
};
|
||||
return (_jsx(ReactNodeViewContext.Provider, __assign({ value: { onDragStart: onDragStart, nodeViewContentRef: nodeViewContentRef } }, { children: _jsx(Component, __assign({}, componentProps)) })));
|
||||
};
|
||||
ReactNodeViewProvider.displayName = "ReactNodeView";
|
||||
this.contentDOMElement = this.node.isLeaf
|
||||
? null
|
||||
: document.createElement(this.node.isInline ? "span" : "div");
|
||||
if (this.contentDOMElement) {
|
||||
// For some reason the whiteSpace prop is not inherited properly in Chrome and Safari
|
||||
// With this fix it seems to work fine
|
||||
// See: https://github.com/ueberdosis/tiptap/issues/1197
|
||||
this.contentDOMElement.style.whiteSpace = "inherit";
|
||||
}
|
||||
var as = this.node.isInline ? "span" : "div";
|
||||
if (this.options.as) {
|
||||
as = this.options.as;
|
||||
}
|
||||
var _a = this.options.className, className = _a === void 0 ? "" : _a;
|
||||
this.renderer = new ReactRenderer(ReactNodeViewProvider, {
|
||||
editor: this.editor,
|
||||
props: props,
|
||||
as: as,
|
||||
className: "node-".concat(this.node.type.name, " ").concat(className).trim(),
|
||||
});
|
||||
};
|
||||
Object.defineProperty(ReactNodeView.prototype, "dom", {
|
||||
get: function () {
|
||||
var _a;
|
||||
if (this.renderer.element.firstElementChild &&
|
||||
!((_a = this.renderer.element.firstElementChild) === null || _a === void 0 ? void 0 : _a.hasAttribute("data-node-view-wrapper"))) {
|
||||
throw Error("Please use the NodeViewWrapper component for your node view.");
|
||||
}
|
||||
return this.renderer.element;
|
||||
},
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
Object.defineProperty(ReactNodeView.prototype, "contentDOM", {
|
||||
get: function () {
|
||||
if (this.node.isLeaf) {
|
||||
return null;
|
||||
}
|
||||
return this.contentDOMElement;
|
||||
},
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
ReactNodeView.prototype.update = function (node, readonlyDecorations, innerDecorations) {
|
||||
var _this = this;
|
||||
var decorations = __spreadArray([], __read(readonlyDecorations), false);
|
||||
var updateProps = function (props) {
|
||||
_this.renderer.updateProps(props);
|
||||
};
|
||||
if (node.type !== this.node.type) {
|
||||
return false;
|
||||
}
|
||||
if (typeof this.options.update === "function") {
|
||||
var oldNode = this.node;
|
||||
var oldDecorations = this.decorations;
|
||||
this.node = node;
|
||||
this.decorations = decorations;
|
||||
return this.options.update({
|
||||
oldNode: oldNode,
|
||||
oldDecorations: oldDecorations,
|
||||
newNode: node,
|
||||
newDecorations: decorations,
|
||||
updateProps: function () { return updateProps({ node: node, decorations: decorations }); },
|
||||
});
|
||||
}
|
||||
if (node === this.node && this.decorations === decorations) {
|
||||
return true;
|
||||
}
|
||||
this.node = node;
|
||||
this.decorations = decorations;
|
||||
updateProps({ node: node, decorations: decorations });
|
||||
return true;
|
||||
};
|
||||
ReactNodeView.prototype.selectNode = function () {
|
||||
this.renderer.updateProps({
|
||||
selected: true,
|
||||
});
|
||||
};
|
||||
ReactNodeView.prototype.deselectNode = function () {
|
||||
this.renderer.updateProps({
|
||||
selected: false,
|
||||
});
|
||||
};
|
||||
ReactNodeView.prototype.destroy = function () {
|
||||
this.renderer.destroy();
|
||||
this.contentDOMElement = null;
|
||||
};
|
||||
return ReactNodeView;
|
||||
}(NodeView));
|
||||
export function ReactNodeViewRenderer(component, options) {
|
||||
return function (props) {
|
||||
// try to get the parent component
|
||||
// this is important for vue devtools to show the component hierarchy correctly
|
||||
// maybe it’s `undefined` because <editor-content> isn’t rendered yet
|
||||
if (!props.editor.contentComponent) {
|
||||
return {};
|
||||
}
|
||||
return new ReactNodeView(component, props, options);
|
||||
};
|
||||
}
|
||||
24
packages/editor/dist/extensions/react/ReactRenderer.d.ts
vendored
Normal file
24
packages/editor/dist/extensions/react/ReactRenderer.d.ts
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import { Editor } from '@tiptap/core';
|
||||
import { Editor as ExtendedEditor } from './Editor';
|
||||
export interface ReactRendererOptions {
|
||||
editor: Editor;
|
||||
props?: Record<string, any>;
|
||||
as?: string;
|
||||
className?: string;
|
||||
}
|
||||
declare type ComponentType<R, P> = React.ComponentClass<P> | React.FunctionComponent<P> | React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<R>>;
|
||||
export declare class ReactRenderer<R = unknown, P = unknown> {
|
||||
id: string;
|
||||
editor: ExtendedEditor;
|
||||
component: any;
|
||||
element: Element;
|
||||
props: Record<string, any>;
|
||||
reactElement: React.ReactNode;
|
||||
ref: R | null;
|
||||
constructor(component: ComponentType<R, P>, { editor, props, as, className, }: ReactRendererOptions);
|
||||
render(): void;
|
||||
updateProps(props?: Record<string, any>): void;
|
||||
destroy(): void;
|
||||
}
|
||||
export {};
|
||||
98
packages/editor/dist/extensions/react/ReactRenderer.js
vendored
Normal file
98
packages/editor/dist/extensions/react/ReactRenderer.js
vendored
Normal file
@@ -0,0 +1,98 @@
|
||||
var __assign = (this && this.__assign) || function () {
|
||||
__assign = Object.assign || function(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||
t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
var __read = (this && this.__read) || function (o, n) {
|
||||
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
||||
if (!m) return o;
|
||||
var i = m.call(o), r, ar = [], e;
|
||||
try {
|
||||
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
||||
}
|
||||
catch (error) { e = { error: error }; }
|
||||
finally {
|
||||
try {
|
||||
if (r && !r.done && (m = i["return"])) m.call(i);
|
||||
}
|
||||
finally { if (e) throw e.error; }
|
||||
}
|
||||
return ar;
|
||||
};
|
||||
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
||||
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
||||
if (ar || !(i in from)) {
|
||||
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
||||
ar[i] = from[i];
|
||||
}
|
||||
}
|
||||
return to.concat(ar || Array.prototype.slice.call(from));
|
||||
};
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
function isClassComponent(Component) {
|
||||
return !!(typeof Component === 'function'
|
||||
&& Component.prototype
|
||||
&& Component.prototype.isReactComponent);
|
||||
}
|
||||
function isForwardRefComponent(Component) {
|
||||
var _a;
|
||||
return !!(typeof Component === 'object'
|
||||
&& ((_a = Component.$$typeof) === null || _a === void 0 ? void 0 : _a.toString()) === 'Symbol(react.forward_ref)');
|
||||
}
|
||||
var ReactRenderer = /** @class */ (function () {
|
||||
function ReactRenderer(component, _a) {
|
||||
var _b;
|
||||
var editor = _a.editor, _c = _a.props, props = _c === void 0 ? {} : _c, _d = _a.as, as = _d === void 0 ? 'div' : _d, _e = _a.className, className = _e === void 0 ? '' : _e;
|
||||
this.ref = null;
|
||||
this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString();
|
||||
this.component = component;
|
||||
this.editor = editor;
|
||||
this.props = props;
|
||||
this.element = document.createElement(as);
|
||||
this.element.classList.add('react-renderer');
|
||||
if (className) {
|
||||
(_b = this.element.classList).add.apply(_b, __spreadArray([], __read(className.split(' ')), false));
|
||||
}
|
||||
this.render();
|
||||
}
|
||||
ReactRenderer.prototype.render = function () {
|
||||
var _this = this;
|
||||
var _a;
|
||||
var Component = this.component;
|
||||
var props = this.props;
|
||||
if (isClassComponent(Component) || isForwardRefComponent(Component)) {
|
||||
props.ref = function (ref) {
|
||||
_this.ref = ref;
|
||||
};
|
||||
}
|
||||
this.reactElement = _jsx(Component, __assign({}, props));
|
||||
if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.contentComponent) {
|
||||
this.editor.contentComponent.setState({
|
||||
renderers: this.editor.contentComponent.state.renderers.set(this.id, this),
|
||||
});
|
||||
}
|
||||
};
|
||||
ReactRenderer.prototype.updateProps = function (props) {
|
||||
if (props === void 0) { props = {}; }
|
||||
this.props = __assign(__assign({}, this.props), props);
|
||||
this.render();
|
||||
};
|
||||
ReactRenderer.prototype.destroy = function () {
|
||||
var _a;
|
||||
if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.contentComponent) {
|
||||
var renderers = this.editor.contentComponent.state.renderers;
|
||||
renderers.delete(this.id);
|
||||
this.editor.contentComponent.setState({
|
||||
renderers: renderers,
|
||||
});
|
||||
}
|
||||
};
|
||||
return ReactRenderer;
|
||||
}());
|
||||
export { ReactRenderer };
|
||||
8
packages/editor/dist/extensions/react/index.d.ts
vendored
Normal file
8
packages/editor/dist/extensions/react/index.d.ts
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
export * from "@tiptap/core";
|
||||
export { Editor } from "./Editor";
|
||||
export * from "./use-editor";
|
||||
export * from "./ReactRenderer";
|
||||
export * from "./ReactNodeViewRenderer";
|
||||
export * from "./EditorContent";
|
||||
export * from "./NodeViewWrapper";
|
||||
export * from "./NodeViewContent";
|
||||
8
packages/editor/dist/extensions/react/index.js
vendored
Normal file
8
packages/editor/dist/extensions/react/index.js
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
export * from "@tiptap/core";
|
||||
export { Editor } from "./Editor";
|
||||
export * from "./use-editor";
|
||||
export * from "./ReactRenderer";
|
||||
export * from "./ReactNodeViewRenderer";
|
||||
export * from "./EditorContent";
|
||||
export * from "./NodeViewWrapper";
|
||||
export * from "./NodeViewContent";
|
||||
4
packages/editor/dist/extensions/react/useEditor.d.ts
vendored
Normal file
4
packages/editor/dist/extensions/react/useEditor.d.ts
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
import { DependencyList } from 'react';
|
||||
import { EditorOptions } from '@tiptap/core';
|
||||
import { Editor } from './Editor';
|
||||
export declare const useEditor: (options?: Partial<EditorOptions>, deps?: DependencyList) => Editor | null;
|
||||
43
packages/editor/dist/extensions/react/useEditor.js
vendored
Normal file
43
packages/editor/dist/extensions/react/useEditor.js
vendored
Normal file
@@ -0,0 +1,43 @@
|
||||
var __read = (this && this.__read) || function (o, n) {
|
||||
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
||||
if (!m) return o;
|
||||
var i = m.call(o), r, ar = [], e;
|
||||
try {
|
||||
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
||||
}
|
||||
catch (error) { e = { error: error }; }
|
||||
finally {
|
||||
try {
|
||||
if (r && !r.done && (m = i["return"])) m.call(i);
|
||||
}
|
||||
finally { if (e) throw e.error; }
|
||||
}
|
||||
return ar;
|
||||
};
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Editor } from './Editor';
|
||||
function useForceUpdate() {
|
||||
var _a = __read(useState(0), 2), setValue = _a[1];
|
||||
return function () { return setValue(function (value) { return value + 1; }); };
|
||||
}
|
||||
export var useEditor = function (options, deps) {
|
||||
if (options === void 0) { options = {}; }
|
||||
if (deps === void 0) { deps = []; }
|
||||
var _a = __read(useState(null), 2), editor = _a[0], setEditor = _a[1];
|
||||
var forceUpdate = useForceUpdate();
|
||||
useEffect(function () {
|
||||
var instance = new Editor(options);
|
||||
setEditor(instance);
|
||||
instance.on('transaction', function () {
|
||||
requestAnimationFrame(function () {
|
||||
requestAnimationFrame(function () {
|
||||
forceUpdate();
|
||||
});
|
||||
});
|
||||
});
|
||||
return function () {
|
||||
instance.destroy();
|
||||
};
|
||||
}, deps);
|
||||
return editor;
|
||||
};
|
||||
7
packages/editor/dist/extensions/react/useReactNodeView.d.ts
vendored
Normal file
7
packages/editor/dist/extensions/react/useReactNodeView.d.ts
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
/// <reference types="react" />
|
||||
export interface ReactNodeViewContextProps {
|
||||
onDragStart: (event: DragEvent) => void;
|
||||
nodeViewContentRef: (element: HTMLElement | null) => void;
|
||||
}
|
||||
export declare const ReactNodeViewContext: import("react").Context<Partial<ReactNodeViewContextProps>>;
|
||||
export declare const useReactNodeView: () => Partial<ReactNodeViewContextProps>;
|
||||
5
packages/editor/dist/extensions/react/useReactNodeView.js
vendored
Normal file
5
packages/editor/dist/extensions/react/useReactNodeView.js
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
import { createContext, useContext } from 'react';
|
||||
export var ReactNodeViewContext = createContext({
|
||||
onDragStart: undefined,
|
||||
});
|
||||
export var useReactNodeView = function () { return useContext(ReactNodeViewContext); };
|
||||
@@ -12,9 +12,7 @@ var __values = (this && this.__values) || function(o) {
|
||||
import { Extension } from "@tiptap/core";
|
||||
import { Decoration, DecorationSet } from "prosemirror-view";
|
||||
import { Plugin, PluginKey, TextSelection, } from "prosemirror-state";
|
||||
var updateView = function (state, dispatch) {
|
||||
return dispatch(state.tr);
|
||||
};
|
||||
var updateView = function (state, dispatch) { return dispatch(state.tr); };
|
||||
var regex = function (s, settings) {
|
||||
var enableRegex = settings.enableRegex, matchCase = settings.matchCase, matchWholeWord = settings.matchWholeWord;
|
||||
var boundary = matchWholeWord ? "\\b" : "";
|
||||
@@ -248,9 +246,10 @@ export var SearchReplace = Extension.create({
|
||||
},
|
||||
addProseMirrorPlugins: function () {
|
||||
var _this = this;
|
||||
var key = new PluginKey("searchreplace");
|
||||
return [
|
||||
new Plugin({
|
||||
key: new PluginKey("searchreplace"),
|
||||
key: key,
|
||||
state: {
|
||||
init: function () {
|
||||
return DecorationSet.empty;
|
||||
@@ -272,7 +271,7 @@ export var SearchReplace = Extension.create({
|
||||
},
|
||||
props: {
|
||||
decorations: function (state) {
|
||||
return this.getState(state);
|
||||
return key.getState(state);
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
/// <reference types="react" />
|
||||
import { ImageProps } from "rebass";
|
||||
import { NodeViewProps } from "@tiptap/react";
|
||||
import { NodeViewProps } from "../react";
|
||||
export declare function TaskItemComponent(props: ImageProps & NodeViewProps): JSX.Element;
|
||||
|
||||
@@ -38,15 +38,17 @@ var __values = (this && this.__values) || function(o) {
|
||||
};
|
||||
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
||||
import { Flex, Text } from "rebass";
|
||||
import { NodeViewWrapper, NodeViewContent, } from "@tiptap/react";
|
||||
import { NodeViewWrapper, NodeViewContent } from "../react";
|
||||
import { ThemeProvider } from "emotion-theming";
|
||||
import { Icon } from "../../toolbar/components/icon";
|
||||
import { Icons } from "../../toolbar/icons";
|
||||
import { findChildren, } from "@tiptap/core";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { TaskItemNode } from "./task-item";
|
||||
export function TaskItemComponent(props) {
|
||||
var _a;
|
||||
var checked = props.node.attrs.checked;
|
||||
var _a = __read(useState({ checked: 0, total: 0 }), 2), stats = _a[0], setStats = _a[1];
|
||||
var _b = __read(useState({ checked: 0, total: 0 }), 2), stats = _b[0], setStats = _b[1];
|
||||
var editor = props.editor, updateAttributes = props.updateAttributes, node = props.node, getPos = props.getPos;
|
||||
var theme = editor.storage.theme;
|
||||
var toggle = useCallback(function () {
|
||||
@@ -59,19 +61,21 @@ export function TaskItemComponent(props) {
|
||||
editor.view.dispatch(tr);
|
||||
return true;
|
||||
}, [editor, getPos, node]);
|
||||
var nestedTaskList = getChildren(node, getPos()).find(function (_a) {
|
||||
var node = _a.node;
|
||||
return node.type.name === "taskList";
|
||||
});
|
||||
var nestedTaskList = useMemo(function () {
|
||||
return getChildren(node, getPos()).find(function (_a) {
|
||||
var node = _a.node;
|
||||
return node.type.name === "taskList";
|
||||
});
|
||||
}, [node.childCount]);
|
||||
var isNested = !!nestedTaskList;
|
||||
var isCollapsed = nestedTaskList
|
||||
? nestedTaskList.node.attrs.collapsed
|
||||
? (_a = editor.state.doc.nodeAt(nestedTaskList.pos)) === null || _a === void 0 ? void 0 : _a.attrs.collapsed
|
||||
: false;
|
||||
useEffect(function () {
|
||||
if (!nestedTaskList)
|
||||
return;
|
||||
var pos = nestedTaskList.pos, node = nestedTaskList.node;
|
||||
var children = findChildren(node, function (node) { return node.type.name === "taskItem"; });
|
||||
var children = findChildren(node, function (node) { return node.type.name === TaskItemNode.name; });
|
||||
var checked = children.filter(function (_a) {
|
||||
var node = _a.node;
|
||||
return node.attrs.checked;
|
||||
@@ -80,7 +84,8 @@ export function TaskItemComponent(props) {
|
||||
setStats({ checked: checked, total: total });
|
||||
}, []);
|
||||
return (_jsx(NodeViewWrapper, { children: _jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Flex, __assign({ sx: {
|
||||
mb: isNested ? 0 : 2,
|
||||
// mb: isNested ? 0 : 2,
|
||||
alignItems: "center",
|
||||
":hover > .dragHandle, :hover > .toggleSublist": {
|
||||
opacity: 1,
|
||||
},
|
||||
@@ -106,22 +111,15 @@ export function TaskItemComponent(props) {
|
||||
":hover .icon path": {
|
||||
fill: "var(--checked) !important",
|
||||
},
|
||||
}, onMouseEnter: function (e) {
|
||||
if (e.buttons > 0) {
|
||||
toggle();
|
||||
}
|
||||
}, onMouseDown: function (e) {
|
||||
if (toggle())
|
||||
e.preventDefault();
|
||||
}, color: checked ? "checked" : "icon", size: 13 }), _jsx(NodeViewContent, { as: "li", style: {
|
||||
listStyleType: "none",
|
||||
}, color: checked ? "checked" : "icon", size: 13 }), _jsx(NodeViewContent, { style: {
|
||||
textDecorationLine: checked ? "line-through" : "none",
|
||||
color: checked ? "var(--checked)" : "var(--text)",
|
||||
flex: 1,
|
||||
marginBottom: isNested ? 0 : 5,
|
||||
} }), isNested && (_jsxs(_Fragment, { children: [isCollapsed && (_jsxs(Text, __assign({ variant: "body", sx: { color: "fontTertiary", mr: 35 } }, { children: [stats.checked, "/", stats.total] }))), _jsx(Icon, { className: "toggleSublist", path: nestedTaskList.node.attrs.collapsed
|
||||
? Icons.chevronDown
|
||||
: Icons.chevronUp, sx: {
|
||||
// marginBottom: isNested ? 0 : 5,
|
||||
} }), isNested && (_jsxs(_Fragment, { children: [isCollapsed && (_jsxs(Text, __assign({ variant: "body", sx: { color: "fontTertiary", mr: 35 } }, { children: [stats.checked, "/", stats.total] }))), _jsx(Icon, { className: "toggleSublist", path: isCollapsed ? Icons.chevronDown : Icons.chevronUp, sx: {
|
||||
opacity: isCollapsed ? 1 : 0,
|
||||
position: "absolute",
|
||||
right: 0,
|
||||
@@ -139,7 +137,7 @@ export function TaskItemComponent(props) {
|
||||
var tr = _a.tr;
|
||||
var pos = nestedTaskList.pos, node = nestedTaskList.node;
|
||||
tr.setNodeMarkup(pos, undefined, {
|
||||
collapsed: !node.attrs.collapsed,
|
||||
collapsed: !isCollapsed,
|
||||
});
|
||||
return true;
|
||||
})
|
||||
@@ -148,7 +146,7 @@ export function TaskItemComponent(props) {
|
||||
}
|
||||
function toggleChildren(node, tr, toggleState, parentPos) {
|
||||
var e_1, _a;
|
||||
var children = findChildren(node, function (node) { return node.type.name === "taskItem"; });
|
||||
var children = findChildren(node, function (node) { return node.type.name === TaskItemNode.name; });
|
||||
try {
|
||||
for (var children_1 = __values(children), children_1_1 = children_1.next(); !children_1_1.done; children_1_1 = children_1.next()) {
|
||||
var pos = children_1_1.value.pos;
|
||||
|
||||
14
packages/editor/dist/extensions/taskitem/reactnodeview.d.ts
vendored
Normal file
14
packages/editor/dist/extensions/taskitem/reactnodeview.d.ts
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
import { NodeViewRenderer, NodeViewRendererOptions } from "@tiptap/core";
|
||||
import { Decoration } from "prosemirror-view";
|
||||
import { Node as ProseMirrorNode } from "prosemirror-model";
|
||||
export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
|
||||
update: ((props: {
|
||||
oldNode: ProseMirrorNode;
|
||||
oldDecorations: Decoration[];
|
||||
newNode: ProseMirrorNode;
|
||||
newDecorations: Decoration[];
|
||||
updateProps: () => void;
|
||||
}) => boolean) | null;
|
||||
as?: string;
|
||||
}
|
||||
export declare function ReactNodeViewRenderer(component: any, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer;
|
||||
167
packages/editor/dist/extensions/taskitem/reactnodeview.js
vendored
Normal file
167
packages/editor/dist/extensions/taskitem/reactnodeview.js
vendored
Normal file
@@ -0,0 +1,167 @@
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
var extendStatics = function (d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
};
|
||||
return function (d, b) {
|
||||
if (typeof b !== "function" && b !== null)
|
||||
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
})();
|
||||
var __assign = (this && this.__assign) || function () {
|
||||
__assign = Object.assign || function(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||
t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
import { NodeView, } from "@tiptap/core";
|
||||
import { ReactRenderer } from "@tiptap/react/src";
|
||||
import { ReactNodeViewContext, } from "@tiptap/react/src/useReactNodeView";
|
||||
var ReactNodeView = /** @class */ (function (_super) {
|
||||
__extends(ReactNodeView, _super);
|
||||
function ReactNodeView() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
ReactNodeView.prototype.mount = function () {
|
||||
var _this = this;
|
||||
var props = {
|
||||
editor: this.editor,
|
||||
node: this.node,
|
||||
decorations: this.decorations,
|
||||
selected: false,
|
||||
extension: this.extension,
|
||||
getPos: function () { return _this.getPos(); },
|
||||
updateAttributes: function (attributes) {
|
||||
if (attributes === void 0) { attributes = {}; }
|
||||
return _this.updateAttributes(attributes);
|
||||
},
|
||||
deleteNode: function () { return _this.deleteNode(); },
|
||||
};
|
||||
if (!this.component.displayName) {
|
||||
var capitalizeFirstChar = function (string) {
|
||||
return string.charAt(0).toUpperCase() + string.substring(1);
|
||||
};
|
||||
this.component.displayName = capitalizeFirstChar(this.extension.name);
|
||||
}
|
||||
var ReactNodeViewProvider = function (componentProps) {
|
||||
var Component = _this.component;
|
||||
var onDragStart = _this.onDragStart.bind(_this);
|
||||
var nodeViewContentRef = function (element) {
|
||||
if (element &&
|
||||
_this.contentDOMElement &&
|
||||
element.firstChild !== _this.contentDOMElement) {
|
||||
element.appendChild(_this.contentDOMElement);
|
||||
}
|
||||
};
|
||||
return (_jsx(ReactNodeViewContext.Provider, __assign({ value: { onDragStart: onDragStart, nodeViewContentRef: nodeViewContentRef } }, { children: _jsx(Component, __assign({}, componentProps)) })));
|
||||
};
|
||||
ReactNodeViewProvider.displayName = "ReactNodeView";
|
||||
this.contentDOMElement = this.node.isLeaf
|
||||
? null
|
||||
: document.createElement(this.node.isInline ? "span" : "div");
|
||||
if (this.contentDOMElement) {
|
||||
// For some reason the whiteSpace prop is not inherited properly in Chrome and Safari
|
||||
// With this fix it seems to work fine
|
||||
// See: https://github.com/ueberdosis/tiptap/issues/1197
|
||||
this.contentDOMElement.style.whiteSpace = "inherit";
|
||||
}
|
||||
var as = this.node.isInline ? "span" : "div";
|
||||
if (this.options.as) {
|
||||
as = this.options.as;
|
||||
}
|
||||
this.renderer = new ReactRenderer(ReactNodeViewProvider, {
|
||||
editor: this.editor,
|
||||
props: props,
|
||||
as: as,
|
||||
className: "node-".concat(this.node.type.name),
|
||||
});
|
||||
};
|
||||
Object.defineProperty(ReactNodeView.prototype, "dom", {
|
||||
get: function () {
|
||||
var _a;
|
||||
if (this.renderer.element.firstElementChild &&
|
||||
!((_a = this.renderer.element.firstElementChild) === null || _a === void 0 ? void 0 : _a.hasAttribute("data-node-view-wrapper"))) {
|
||||
throw Error("Please use the NodeViewWrapper component for your node view.");
|
||||
}
|
||||
return this.renderer.element;
|
||||
},
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
Object.defineProperty(ReactNodeView.prototype, "contentDOM", {
|
||||
get: function () {
|
||||
if (this.node.isLeaf) {
|
||||
return null;
|
||||
}
|
||||
return this.contentDOMElement;
|
||||
},
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
ReactNodeView.prototype.update = function (node, decorations) {
|
||||
var _this = this;
|
||||
var updateProps = function (props) {
|
||||
_this.renderer.updateProps(props);
|
||||
};
|
||||
if (node.type !== this.node.type) {
|
||||
return false;
|
||||
}
|
||||
if (typeof this.options.update === "function") {
|
||||
var oldNode = this.node;
|
||||
var oldDecorations = this.decorations;
|
||||
this.node = node;
|
||||
this.decorations = decorations;
|
||||
return this.options.update({
|
||||
oldNode: oldNode,
|
||||
oldDecorations: oldDecorations,
|
||||
newNode: node,
|
||||
newDecorations: decorations,
|
||||
updateProps: function () { return updateProps({ node: node, decorations: decorations }); },
|
||||
});
|
||||
}
|
||||
if (node === this.node && this.decorations === decorations) {
|
||||
return true;
|
||||
}
|
||||
this.node = node;
|
||||
this.decorations = decorations;
|
||||
updateProps({ node: node, decorations: decorations });
|
||||
return true;
|
||||
};
|
||||
ReactNodeView.prototype.selectNode = function () {
|
||||
this.renderer.updateProps({
|
||||
selected: true,
|
||||
});
|
||||
};
|
||||
ReactNodeView.prototype.deselectNode = function () {
|
||||
this.renderer.updateProps({
|
||||
selected: false,
|
||||
});
|
||||
};
|
||||
ReactNodeView.prototype.destroy = function () {
|
||||
this.renderer.destroy();
|
||||
this.contentDOMElement = null;
|
||||
};
|
||||
return ReactNodeView;
|
||||
}(NodeView));
|
||||
export function ReactNodeViewRenderer(component, options) {
|
||||
return function (props) {
|
||||
// try to get the parent component
|
||||
// this is important for vue devtools to show the component hierarchy correctly
|
||||
// maybe it’s `undefined` because <editor-content> isn’t rendered yet
|
||||
if (!props.editor.contentComponent) {
|
||||
return {};
|
||||
}
|
||||
return new ReactNodeView(component, props, options);
|
||||
};
|
||||
}
|
||||
@@ -1,3 +1 @@
|
||||
export interface AttachmentOptions {
|
||||
}
|
||||
export declare const TaskItemNode: import("@tiptap/core").Node<import("@tiptap/extension-task-item").TaskItemOptions, any>;
|
||||
|
||||
@@ -1,7 +1,19 @@
|
||||
var __assign = (this && this.__assign) || function () {
|
||||
__assign = Object.assign || function(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||
t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
import { mergeAttributes } from "@tiptap/core";
|
||||
import { onBackspacePressed } from "../list-item/commands";
|
||||
import { TaskItem } from "@tiptap/extension-task-item";
|
||||
import { ReactNodeViewRenderer } from "@tiptap/react";
|
||||
import { TaskItemComponent } from "./component";
|
||||
import { ReactNodeViewRenderer } from "../react";
|
||||
export var TaskItemNode = TaskItem.extend({
|
||||
draggable: true,
|
||||
addAttributes: function () {
|
||||
@@ -33,9 +45,10 @@ export var TaskItemNode = TaskItem.extend({
|
||||
getAttrs: function (node) {
|
||||
var _a;
|
||||
if (node instanceof Node && node instanceof HTMLElement) {
|
||||
return ((node.classList.contains("checklist--item") ||
|
||||
((_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains("checklist"))) &&
|
||||
null);
|
||||
return node.classList.contains("checklist--item") ||
|
||||
((_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains("checklist"))
|
||||
? null
|
||||
: false;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
@@ -43,34 +56,17 @@ export var TaskItemNode = TaskItem.extend({
|
||||
},
|
||||
];
|
||||
},
|
||||
// renderHTML({ node, HTMLAttributes }) {
|
||||
// return [
|
||||
// 'li',
|
||||
// mergeAttributes(
|
||||
// this.options.HTMLAttributes,
|
||||
// HTMLAttributes,
|
||||
// { 'data-type': this.name },
|
||||
// ),
|
||||
// [
|
||||
// 'label',
|
||||
// [
|
||||
// 'input',
|
||||
// {
|
||||
// type: 'checkbox',
|
||||
// checked: node.attrs.checked
|
||||
// ? 'checked'
|
||||
// : null,
|
||||
// },
|
||||
// ],
|
||||
// ['span'],
|
||||
// ],
|
||||
// [
|
||||
// 'div',
|
||||
// 0,
|
||||
// ],
|
||||
// ]
|
||||
// },
|
||||
addKeyboardShortcuts: function () {
|
||||
var _this = this;
|
||||
var _a;
|
||||
return __assign(__assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { Backspace: function (_a) {
|
||||
var editor = _a.editor;
|
||||
return onBackspacePressed(editor, _this.name, _this.type);
|
||||
} });
|
||||
},
|
||||
addNodeView: function () {
|
||||
return ReactNodeViewRenderer(TaskItemComponent);
|
||||
return ReactNodeViewRenderer(TaskItemComponent, {
|
||||
as: "li",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,3 +1,2 @@
|
||||
/// <reference types="react" />
|
||||
import { NodeViewProps } from "@tiptap/react";
|
||||
import { NodeViewProps } from "../react";
|
||||
export declare function TaskListComponent(props: NodeViewProps): JSX.Element;
|
||||
|
||||
@@ -27,20 +27,23 @@ var __read = (this && this.__read) || function (o, n) {
|
||||
};
|
||||
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
||||
import { Box, Flex, Text } from "rebass";
|
||||
import { NodeViewWrapper, NodeViewContent, } from "@tiptap/react";
|
||||
import { NodeViewWrapper, NodeViewContent } from "../react";
|
||||
import { findParentNodeClosestToPos, findChildren } from "@tiptap/core";
|
||||
import { ThemeProvider } from "emotion-theming";
|
||||
import { Icon } from "../../toolbar/components/icon";
|
||||
import { Icons } from "../../toolbar/icons";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Input } from "@rebass/forms";
|
||||
import { TaskItemNode } from "../task-item";
|
||||
export function TaskListComponent(props) {
|
||||
var editor = props.editor, getPos = props.getPos, node = props.node, updateAttributes = props.updateAttributes;
|
||||
var _a = node.attrs, collapsed = _a.collapsed, title = _a.title;
|
||||
var _b = __read(useState({ checked: 0, total: 0, percentage: 0 }), 2), stats = _b[0], setStats = _b[1];
|
||||
var theme = editor.storage.theme;
|
||||
var resolvedPos = editor.state.doc.resolve(getPos());
|
||||
var parentTaskItem = findParentNodeClosestToPos(resolvedPos, function (node) { return node.type.name === "taskItem"; });
|
||||
var parentTaskItem = useMemo(function () {
|
||||
var resolvedPos = editor.state.doc.resolve(getPos());
|
||||
return findParentNodeClosestToPos(resolvedPos, function (node) { return node.type.name === TaskItemNode.name; });
|
||||
}, []);
|
||||
var nested = !!parentTaskItem;
|
||||
useEffect(function () {
|
||||
if (!parentTaskItem)
|
||||
@@ -54,7 +57,7 @@ export function TaskListComponent(props) {
|
||||
useEffect(function () {
|
||||
if (nested)
|
||||
return;
|
||||
var children = findChildren(node, function (node) { return node.type.name === "taskItem"; });
|
||||
var children = findChildren(node, function (node) { return node.type.name === TaskItemNode.name; });
|
||||
var checked = children.filter(function (node) { return node.node.attrs.checked; }).length;
|
||||
var total = children.length;
|
||||
var percentage = Math.round((checked / total) * 100);
|
||||
@@ -81,11 +84,11 @@ export function TaskListComponent(props) {
|
||||
updateAttributes({ title: e.target.value });
|
||||
} }), _jsxs(Flex, __assign({ sx: { flexShrink: 0, pr: 2 } }, { children: [_jsx(Icon, { path: Icons.checkbox, size: 15, color: "fontTertiary" }), _jsxs(Text, __assign({ variant: "body", sx: { ml: 1, color: "fontTertiary" } }, { children: [stats.checked, "/", stats.total] }))] }))] }))) })) })), _jsx(NodeViewContent, { as: "ul", style: {
|
||||
paddingInlineStart: 0,
|
||||
marginBlockStart: nested ? 15 : 0,
|
||||
marginBlockStart: nested ? 10 : 0,
|
||||
marginBlockEnd: 0,
|
||||
} })] })));
|
||||
}
|
||||
function areAllChecked(node) {
|
||||
var children = findChildren(node, function (node) { return node.type.name === "taskItem"; });
|
||||
var children = findChildren(node, function (node) { return node.type.name === TaskItemNode.name; });
|
||||
return children.every(function (node) { return node.node.attrs.checked; });
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { mergeAttributes } from "@tiptap/core";
|
||||
import { TaskList } from "@tiptap/extension-task-list";
|
||||
import { ReactNodeViewRenderer } from "@tiptap/react";
|
||||
import { ReactNodeViewRenderer } from "../react";
|
||||
import { TaskListComponent } from "./component";
|
||||
export var TaskListNode = TaskList.extend({
|
||||
addAttributes: function () {
|
||||
@@ -52,6 +52,30 @@ export var TaskListNode = TaskList.extend({
|
||||
0,
|
||||
];
|
||||
},
|
||||
addCommands: function () {
|
||||
var _this = this;
|
||||
return {
|
||||
toggleTaskList: function () {
|
||||
return function (_a) {
|
||||
var editor = _a.editor, commands = _a.commands, state = _a.state, tr = _a.tr;
|
||||
var _b = state.selection, $from = _b.$from, $to = _b.$to;
|
||||
commands.toggleList(_this.name, _this.options.itemTypeName);
|
||||
var position = {
|
||||
from: tr.mapping.map($from.pos),
|
||||
to: tr.mapping.map($to.pos),
|
||||
};
|
||||
// There is a minor bug in Prosemirror or Tiptap where creating
|
||||
// nested node view causes the editor selection to act weird.
|
||||
// The solution is to manually force the editor back to the correct
|
||||
// position.
|
||||
// NOTE: We have to wrap this in setTimeout & use the editor
|
||||
// directly or else it won't run.
|
||||
setTimeout(function () { return editor.commands.setTextSelection(position); }, 0);
|
||||
return true;
|
||||
};
|
||||
},
|
||||
};
|
||||
},
|
||||
addNodeView: function () {
|
||||
return ReactNodeViewRenderer(TaskListComponent);
|
||||
},
|
||||
|
||||
6
packages/editor/dist/index.d.ts
vendored
6
packages/editor/dist/index.d.ts
vendored
@@ -1,9 +1,9 @@
|
||||
/// <reference types="react" />
|
||||
import { EditorOptions } from "@tiptap/react";
|
||||
import { EditorOptions } from "./extensions/react";
|
||||
import Toolbar from "./toolbar";
|
||||
import { Theme } from "@notesnook/theme";
|
||||
import { AttachmentOptions } from "./extensions/attachment";
|
||||
declare const useTiptap: (options?: Partial<EditorOptions & AttachmentOptions & {
|
||||
theme: Theme;
|
||||
}>, deps?: import("react").DependencyList | undefined) => import("@tiptap/react").Editor | null;
|
||||
}>, deps?: React.DependencyList) => import("./extensions/react").Editor | null;
|
||||
export { useTiptap, Toolbar };
|
||||
export * from "./extensions/react";
|
||||
|
||||
9
packages/editor/dist/index.js
vendored
9
packages/editor/dist/index.js
vendored
@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
||||
import CharacterCount from "@tiptap/extension-character-count";
|
||||
import Placeholder from "@tiptap/extension-placeholder";
|
||||
import Underline from "@tiptap/extension-underline";
|
||||
import { useEditor } from "@tiptap/react";
|
||||
import { useEditor } from "./extensions/react";
|
||||
import StarterKit from "@tiptap/starter-kit";
|
||||
import { useMemo } from "react";
|
||||
import { EditorView } from "prosemirror-view";
|
||||
@@ -52,6 +52,7 @@ import { Dropcursor } from "./extensions/drop-cursor";
|
||||
import { SearchReplace } from "./extensions/search-replace";
|
||||
import { EmbedNode } from "./extensions/embed";
|
||||
import { CodeBlock } from "./extensions/code-block";
|
||||
import { ListItem } from "./extensions/list-item";
|
||||
EditorView.prototype.updateState = function updateState(state) {
|
||||
if (!this.docView)
|
||||
return; // This prevents the matchesNode error on hot reloads
|
||||
@@ -67,6 +68,9 @@ var useTiptap = function (options, deps) {
|
||||
StarterKit.configure({
|
||||
dropcursor: false,
|
||||
codeBlock: false,
|
||||
listItem: false,
|
||||
orderedList: false,
|
||||
bulletList: false,
|
||||
}),
|
||||
Dropcursor.configure({
|
||||
class: "drop-cursor",
|
||||
@@ -108,6 +112,7 @@ var useTiptap = function (options, deps) {
|
||||
AttachmentNode.configure({
|
||||
onDownloadAttachment: onDownloadAttachment,
|
||||
}),
|
||||
ListItem,
|
||||
],
|
||||
onCreate: function (_a) {
|
||||
var editor = _a.editor;
|
||||
@@ -117,6 +122,7 @@ var useTiptap = function (options, deps) {
|
||||
if (onCreate)
|
||||
onCreate({ editor: editor });
|
||||
},
|
||||
injectCSS: false,
|
||||
}); }, [theme, onCreate, onDownloadAttachment]);
|
||||
var editor = useEditor(__assign(__assign({}, defaultOptions), restOptions), deps);
|
||||
/**
|
||||
@@ -126,3 +132,4 @@ var useTiptap = function (options, deps) {
|
||||
return editor;
|
||||
};
|
||||
export { useTiptap, Toolbar };
|
||||
export * from "./extensions/react";
|
||||
|
||||
1
packages/editor/dist/styles.css
vendored
Symbolic link
1
packages/editor/dist/styles.css
vendored
Symbolic link
@@ -0,0 +1 @@
|
||||
/home/thecodrr/Sources/Repos/notesnook-editor/src/styles.css
|
||||
@@ -1,4 +1,3 @@
|
||||
/// <reference types="react" />
|
||||
import { Theme } from "@notesnook/theme";
|
||||
import { SchemeColors } from "@notesnook/theme/dist/theme/colorscheme";
|
||||
import { FlexProps } from "rebass";
|
||||
|
||||
@@ -1,3 +1,2 @@
|
||||
/// <reference types="react" />
|
||||
import { FloatingMenuProps } from "./types";
|
||||
export declare function EditorFloatingMenus(props: FloatingMenuProps): JSX.Element;
|
||||
|
||||
@@ -1,3 +1,2 @@
|
||||
/// <reference types="react" />
|
||||
import { FloatingMenuProps } from "./types";
|
||||
export declare function SearchReplaceFloatingMenu(props: FloatingMenuProps): JSX.Element | null;
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
/// <reference types="react" />
|
||||
import { FloatingMenuProps } from "./types";
|
||||
export declare function TableRowFloatingMenu(props: FloatingMenuProps): JSX.Element | null;
|
||||
export declare function TableColumnFloatingMenu(props: FloatingMenuProps): JSX.Element | null;
|
||||
526
packages/editor/dist/toolbar/floatingmenus/table.js
vendored
526
packages/editor/dist/toolbar/floatingmenus/table.js
vendored
@@ -1,526 +0,0 @@
|
||||
var __assign = (this && this.__assign) || function () {
|
||||
__assign = Object.assign || function(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||
t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
||||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
||||
return new (P || (P = Promise))(function (resolve, reject) {
|
||||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
||||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
||||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
||||
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
||||
});
|
||||
};
|
||||
var __generator = (this && this.__generator) || function (thisArg, body) {
|
||||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
||||
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
||||
function verb(n) { return function (v) { return step([n, v]); }; }
|
||||
function step(op) {
|
||||
if (f) throw new TypeError("Generator is already executing.");
|
||||
while (_) try {
|
||||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
||||
if (y = 0, t) op = [op[0] & 2, t.value];
|
||||
switch (op[0]) {
|
||||
case 0: case 1: t = op; break;
|
||||
case 4: _.label++; return { value: op[1], done: false };
|
||||
case 5: _.label++; y = op[1]; op = [0]; continue;
|
||||
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
||||
default:
|
||||
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
||||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
||||
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
||||
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
||||
if (t[2]) _.ops.pop();
|
||||
_.trys.pop(); continue;
|
||||
}
|
||||
op = body.call(thisArg, _);
|
||||
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
||||
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
||||
}
|
||||
};
|
||||
var __rest = (this && this.__rest) || function (s, e) {
|
||||
var t = {};
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||
t[p] = s[p];
|
||||
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||
t[p[i]] = s[p[i]];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
var __read = (this && this.__read) || function (o, n) {
|
||||
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
||||
if (!m) return o;
|
||||
var i = m.call(o), r, ar = [], e;
|
||||
try {
|
||||
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
||||
}
|
||||
catch (error) { e = { error: error }; }
|
||||
finally {
|
||||
try {
|
||||
if (r && !r.done && (m = i["return"])) m.call(i);
|
||||
}
|
||||
finally { if (e) throw e.error; }
|
||||
}
|
||||
return ar;
|
||||
};
|
||||
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
||||
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
||||
if (ar || !(i in from)) {
|
||||
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
||||
ar[i] = from[i];
|
||||
}
|
||||
}
|
||||
return to.concat(ar || Array.prototype.slice.call(from));
|
||||
};
|
||||
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
||||
import { Slider } from "@rebass/forms";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Flex, Text } from "rebass";
|
||||
import { ActionSheetPresenter, MenuPresenter, } from "../../components/menu/menu";
|
||||
import { Popup } from "../components/popup";
|
||||
import { ToolButton } from "../components/tool-button";
|
||||
import { selectedRect } from "prosemirror-tables";
|
||||
import { DesktopOnly, MobileOnly } from "../../components/responsive";
|
||||
export function TableRowFloatingMenu(props) {
|
||||
var editor = props.editor;
|
||||
// const theme = editor.storage.theme as Theme;
|
||||
var _a = __read(useState(null), 2), position = _a[0], setPosition = _a[1];
|
||||
useEffect(function () {
|
||||
var _a;
|
||||
if (!editor.isActive("tableCell") &&
|
||||
!editor.isActive("tableRow") &&
|
||||
!editor.isActive("tableHeader")) {
|
||||
setPosition(null);
|
||||
return;
|
||||
}
|
||||
var $from = editor.state.selection.$from;
|
||||
var selectedNode = $from.node();
|
||||
var pos = selectedNode.isTextblock ? $from.before() : $from.pos;
|
||||
var currentRow = (_a = editor.view.nodeDOM(pos)) === null || _a === void 0 ? void 0 : _a.closest("tr");
|
||||
if (!currentRow)
|
||||
return;
|
||||
setPosition(function (old) {
|
||||
if ((old === null || old === void 0 ? void 0 : old.target) === currentRow)
|
||||
return old;
|
||||
return {
|
||||
isTargetAbsolute: true,
|
||||
location: "left",
|
||||
xOffset: -5,
|
||||
target: currentRow,
|
||||
// parent: editor.view.dom as HTMLElement,
|
||||
};
|
||||
});
|
||||
}, [editor.state.selection]);
|
||||
if (!position)
|
||||
return null;
|
||||
return (_jsx(MenuPresenter, __assign({ isOpen: true, items: [], onClose: function () { }, options: {
|
||||
type: "autocomplete",
|
||||
position: position,
|
||||
} }, { children: _jsxs(Flex, __assign({ sx: {
|
||||
bg: "background",
|
||||
flexWrap: "nowrap",
|
||||
borderRadius: "default",
|
||||
// opacity: isMenuOpen ? 1 : 0.3,
|
||||
":hover": {
|
||||
opacity: 1,
|
||||
},
|
||||
} }, { children: [_jsx(RowProperties, { title: "Row properties", editor: editor, variant: "small", icon: "more" }), _jsx(InsertRowBelow, { title: "Insert row below", icon: "insertRowBelow", editor: editor, variant: "small" })] })) })));
|
||||
}
|
||||
function RowProperties(props) {
|
||||
var editor = props.editor, toolProps = __rest(props, ["editor"]);
|
||||
var _a = __read(useState(false), 2), isMenuOpen = _a[0], setIsMenuOpen = _a[1];
|
||||
return (_jsxs(_Fragment, { children: [_jsx(ToolButton, __assign({ toggled: isMenuOpen }, toolProps, { onClick: function () { return setIsMenuOpen(true); } })), _jsx(MenuPresenter, { isOpen: isMenuOpen, onClose: function () {
|
||||
setIsMenuOpen(false);
|
||||
editor.commands.focus();
|
||||
}, options: {
|
||||
type: "menu",
|
||||
position: {},
|
||||
}, items: [
|
||||
{
|
||||
key: "addRowAbove",
|
||||
type: "menuitem",
|
||||
title: "Add row above",
|
||||
onClick: function () { return editor.chain().focus().addRowBefore().run(); },
|
||||
icon: "insertRowAbove",
|
||||
},
|
||||
{
|
||||
key: "moveRowUp",
|
||||
type: "menuitem",
|
||||
title: "Move row up",
|
||||
onClick: function () { return moveRowUp(editor); },
|
||||
icon: "moveRowUp",
|
||||
},
|
||||
{
|
||||
key: "moveRowDown",
|
||||
type: "menuitem",
|
||||
title: "Move row down",
|
||||
onClick: function () { return moveRowDown(editor); },
|
||||
icon: "moveRowDown",
|
||||
},
|
||||
{
|
||||
key: "deleteRow",
|
||||
type: "menuitem",
|
||||
title: "Delete row",
|
||||
onClick: function () { return editor.chain().focus().deleteRow().run(); },
|
||||
icon: "deleteRow",
|
||||
},
|
||||
] })] }));
|
||||
}
|
||||
function InsertRowBelow(props) {
|
||||
var editor = props.editor, toolProps = __rest(props, ["editor"]);
|
||||
return (_jsx(ToolButton, __assign({ toggled: false }, toolProps, { onClick: function () { return editor.chain().focus().addRowAfter().run(); } })));
|
||||
}
|
||||
function ColumnProperties(props) {
|
||||
var _this = this;
|
||||
var editor = props.editor, currentCell = props.currentCell, toolProps = __rest(props, ["editor", "currentCell"]);
|
||||
var _a = __read(useState(false), 2), isMenuOpen = _a[0], setIsMenuOpen = _a[1];
|
||||
var isInsideCellSelection = !editor.state.selection.empty &&
|
||||
editor.state.selection.$anchor.node().type.name === "tableCell";
|
||||
var _b = __read(useState(false), 2), showCellProps = _b[0], setShowCellProps = _b[1];
|
||||
var _c = __read(useState(null), 2), menuPosition = _c[0], setMenuPosition = _c[1];
|
||||
var columnProperties = [
|
||||
{
|
||||
key: "addColumnLeft",
|
||||
type: "menuitem",
|
||||
title: "Add column left",
|
||||
onClick: function () { return editor.chain().focus().addColumnBefore().run(); },
|
||||
icon: "insertColumnLeft",
|
||||
},
|
||||
{
|
||||
key: "addColumnRight",
|
||||
type: "menuitem",
|
||||
title: "Add column right",
|
||||
onClick: function () { return editor.chain().focus().addColumnAfter().run(); },
|
||||
icon: "insertColumnRight",
|
||||
},
|
||||
{
|
||||
key: "moveColumnLeft",
|
||||
type: "menuitem",
|
||||
title: "Move column left",
|
||||
onClick: function () { return moveColumnLeft(editor); },
|
||||
icon: "moveColumnLeft",
|
||||
},
|
||||
{
|
||||
key: "moveColumnRight",
|
||||
type: "menuitem",
|
||||
title: "Move column right",
|
||||
onClick: function () { return moveColumnRight(editor); },
|
||||
icon: "moveColumnRight",
|
||||
},
|
||||
{
|
||||
key: "deleteColumn",
|
||||
type: "menuitem",
|
||||
title: "Delete column",
|
||||
onClick: function () { return editor.chain().focus().deleteColumn().run(); },
|
||||
icon: "deleteColumn",
|
||||
},
|
||||
];
|
||||
var mergeSplitProperties = [
|
||||
{
|
||||
key: "splitCells",
|
||||
type: "menuitem",
|
||||
title: "Split cells",
|
||||
onClick: function () { return editor.chain().focus().splitCell().run(); },
|
||||
icon: "splitCells",
|
||||
},
|
||||
{
|
||||
key: "mergeCells",
|
||||
type: "menuitem",
|
||||
title: "Merge cells",
|
||||
onClick: function () { return editor.chain().focus().mergeCells().run(); },
|
||||
icon: "mergeCells",
|
||||
},
|
||||
];
|
||||
var cellProperties = [
|
||||
{
|
||||
key: "cellProperties",
|
||||
type: "menuitem",
|
||||
title: "Cell properties",
|
||||
onClick: function () {
|
||||
setShowCellProps(true);
|
||||
setMenuPosition({
|
||||
target: currentCell || undefined,
|
||||
isTargetAbsolute: true,
|
||||
yOffset: 10,
|
||||
location: "below",
|
||||
});
|
||||
},
|
||||
icon: "cellProperties",
|
||||
},
|
||||
];
|
||||
var tableProperties = [
|
||||
{
|
||||
key: "deleteTable",
|
||||
type: "menuitem",
|
||||
title: "Delete table",
|
||||
icon: "deleteTable",
|
||||
onClick: function () { return editor.chain().focus().deleteTable().run(); },
|
||||
},
|
||||
];
|
||||
return (_jsxs(_Fragment, { children: [_jsx(ToolButton, __assign({ toggled: isMenuOpen }, toolProps, { onClick: function () { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
|
||||
return [2 /*return*/, setIsMenuOpen(true)];
|
||||
}); }); } })), _jsx(MenuPresenter, { isOpen: isMenuOpen, onClose: function () {
|
||||
setIsMenuOpen(false);
|
||||
editor.commands.focus();
|
||||
}, options: {
|
||||
type: "menu",
|
||||
position: {},
|
||||
}, items: isInsideCellSelection
|
||||
? __spreadArray(__spreadArray([], __read(mergeSplitProperties), false), __read(cellProperties), false) : __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(columnProperties), false), [
|
||||
{ type: "seperator", key: "cellSeperator" }
|
||||
], false), __read(cellProperties), false), [
|
||||
{ type: "seperator", key: "tableSeperator" }
|
||||
], false), __read(tableProperties), false) }), _jsx(DesktopOnly, { children: _jsx(MenuPresenter, __assign({ isOpen: showCellProps, onClose: function () {
|
||||
setShowCellProps(false);
|
||||
editor.commands.focus();
|
||||
}, options: {
|
||||
type: "menu",
|
||||
position: menuPosition || {},
|
||||
}, items: [] }, { children: _jsx(CellProperties, { editor: editor, onClose: function () { return setShowCellProps(false); } }) })) }), _jsx(MobileOnly, { children: _jsx(ActionSheetPresenter, __assign({ isOpen: showCellProps, onClose: function () {
|
||||
setShowCellProps(false);
|
||||
editor.commands.focus();
|
||||
}, items: [] }, { children: _jsx(CellProperties, { editor: editor, onClose: function () { return setShowCellProps(false); } }) })) })] }));
|
||||
}
|
||||
function InsertColumnRight(props) {
|
||||
var editor = props.editor, toolProps = __rest(props, ["editor"]);
|
||||
return (_jsx(ToolButton, __assign({}, toolProps, { toggled: false, onClick: function () { return editor.chain().focus().addColumnAfter().run(); } })));
|
||||
}
|
||||
export function TableColumnFloatingMenu(props) {
|
||||
var editor = props.editor;
|
||||
var _a = __read(useState(null), 2), position = _a[0], setPosition = _a[1];
|
||||
useEffect(function () {
|
||||
var _a;
|
||||
if (!editor.isActive("tableCell") &&
|
||||
!editor.isActive("tableRow") &&
|
||||
!editor.isActive("tableHeader")) {
|
||||
setPosition(null);
|
||||
return;
|
||||
}
|
||||
var $from = editor.state.selection.$from;
|
||||
var selectedNode = $from.node();
|
||||
var pos = selectedNode.isTextblock ? $from.before() : $from.pos;
|
||||
var currentCell = (_a = editor.view.nodeDOM(pos)) === null || _a === void 0 ? void 0 : _a.closest("td,th");
|
||||
var currentTable = currentCell === null || currentCell === void 0 ? void 0 : currentCell.closest("table");
|
||||
if (!currentCell || !currentTable)
|
||||
return;
|
||||
setPosition(function (old) {
|
||||
if ((old === null || old === void 0 ? void 0 : old.target) === currentCell)
|
||||
return old;
|
||||
return {
|
||||
isTargetAbsolute: true,
|
||||
location: "top",
|
||||
align: "center",
|
||||
yAnchor: currentTable,
|
||||
yOffset: 2,
|
||||
target: currentCell,
|
||||
};
|
||||
});
|
||||
}, [editor.state.selection]);
|
||||
if (!position)
|
||||
return null;
|
||||
return (_jsx(MenuPresenter, __assign({ isOpen: true, items: [], onClose: function () { }, options: {
|
||||
type: "autocomplete",
|
||||
position: position,
|
||||
} }, { children: _jsxs(Flex, __assign({ sx: {
|
||||
bg: "background",
|
||||
flexWrap: "nowrap",
|
||||
borderRadius: "default",
|
||||
// opacity: 0.3,
|
||||
// opacity: isMenuOpen || showCellProps ? 1 : 0.3,
|
||||
":hover": {
|
||||
opacity: 1,
|
||||
},
|
||||
} }, { children: [_jsx(ColumnProperties, { currentCell: position.target, title: "Column properties", editor: editor, icon: "more", variant: "small" }), _jsx(InsertColumnRight, { editor: editor, title: "Insert column right", variant: "small", icon: "plus" })] })) })));
|
||||
}
|
||||
function CellProperties(props) {
|
||||
var editor = props.editor, onClose = props.onClose;
|
||||
var attributes = editor.getAttributes("tableCell");
|
||||
console.log(attributes);
|
||||
return (_jsx(Popup, __assign({ title: "Cell properties", action: {
|
||||
icon: "close",
|
||||
iconColor: "error",
|
||||
onClick: onClose,
|
||||
} }, { children: _jsxs(Flex, __assign({ sx: { flexDirection: "column", px: 1, mb: 2 } }, { children: [_jsx(ColorPickerTool, { color: attributes.backgroundColor, title: "Background color", icon: "backgroundColor", onColorChange: function (color) {
|
||||
return editor.commands.setCellAttribute("backgroundColor", color);
|
||||
} }), _jsx(ColorPickerTool, { color: attributes.color, title: "Text color", icon: "textColor", onColorChange: function (color) {
|
||||
return editor.commands.setCellAttribute("color", color);
|
||||
} }), _jsx(ColorPickerTool, { color: attributes.borderColor, title: "Border color", icon: "borderColor", onColorChange: function (color) {
|
||||
return editor.commands.setCellAttribute("borderColor", color);
|
||||
} }), _jsxs(Flex, __assign({ sx: { flexDirection: "column" } }, { children: [_jsxs(Flex, __assign({ sx: {
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
mt: 1,
|
||||
} }, { children: [_jsx(Text, __assign({ variant: "body" }, { children: "Border width" })), _jsxs(Text, __assign({ variant: "body" }, { children: [attributes.borderWidth || 1, "px"] }))] })), _jsx(Slider, { min: 1, max: 5, value: attributes.borderWidth || 1, onChange: function (e) {
|
||||
editor.commands.setCellAttribute("borderWidth", e.target.valueAsNumber);
|
||||
} })] }))] })) })));
|
||||
}
|
||||
function ColorPickerTool(props) {
|
||||
var color = props.color, title = props.title, icon = props.icon, onColorChange = props.onColorChange;
|
||||
var _a = __read(useState(false), 2), isOpen = _a[0], setIsOpen = _a[1];
|
||||
var buttonRef = useRef(null);
|
||||
return (_jsxs(_Fragment, { children: [_jsxs(Flex, __assign({ sx: { justifyContent: "space-between", alignItems: "center", mt: 1 } }, { children: [_jsx(Text, __assign({ variant: "body" }, { children: title })), _jsx(ToolButton, { buttonRef: buttonRef, toggled: isOpen, title: title, id: icon, icon: icon, iconSize: 16, sx: {
|
||||
p: "2.5px",
|
||||
borderRadius: "small",
|
||||
backgroundColor: color || "transparent",
|
||||
":hover": { bg: color, filter: "brightness(90%)" },
|
||||
}, onClick: function () { return setIsOpen(true); } })] })), _jsx(MenuPresenter, __assign({ isOpen: isOpen, onClose: function () { return setIsOpen(false); }, items: [], options: {
|
||||
type: "menu",
|
||||
position: {
|
||||
target: buttonRef.current || undefined,
|
||||
location: "below",
|
||||
align: "center",
|
||||
isTargetAbsolute: true,
|
||||
yOffset: 5,
|
||||
},
|
||||
} }, { children: _jsx(Flex, { sx: {
|
||||
flexDirection: "column",
|
||||
bg: "background",
|
||||
boxShadow: "menu",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "default",
|
||||
p: 1,
|
||||
width: 160,
|
||||
} }) }))] }));
|
||||
}
|
||||
/**
|
||||
* Done:
|
||||
* insertTable
|
||||
*
|
||||
* addRowBefore
|
||||
* addRowAfter
|
||||
* deleteRow
|
||||
*
|
||||
* addColumnBefore
|
||||
* addColumnAfter
|
||||
* deleteColumn
|
||||
*
|
||||
* setCellAttribute
|
||||
*
|
||||
* deleteTable
|
||||
*
|
||||
* mergeCells
|
||||
* splitCell
|
||||
* mergeOrSplit
|
||||
*
|
||||
* toggleHeaderColumn
|
||||
* toggleHeaderRow
|
||||
* toggleHeaderCell
|
||||
* fixTables
|
||||
* goToNextCell
|
||||
* goToPreviousCell
|
||||
*/
|
||||
function moveColumnRight(editor) {
|
||||
var tr = editor.state.tr;
|
||||
var rect = selectedRect(editor.state);
|
||||
if (rect.right === rect.map.width)
|
||||
return;
|
||||
var transaction = moveColumn(tr, rect, rect.left, rect.left + 1);
|
||||
if (!transaction)
|
||||
return;
|
||||
editor.view.dispatch(transaction);
|
||||
}
|
||||
function moveColumnLeft(editor) {
|
||||
var tr = editor.state.tr;
|
||||
var rect = selectedRect(editor.state);
|
||||
if (rect.left === 0)
|
||||
return;
|
||||
var transaction = moveColumn(tr, rect, rect.left, rect.left - 1);
|
||||
if (!transaction)
|
||||
return;
|
||||
editor.view.dispatch(transaction);
|
||||
}
|
||||
function moveRowDown(editor) {
|
||||
var tr = editor.state.tr;
|
||||
var rect = selectedRect(editor.state);
|
||||
if (rect.top + 1 === rect.map.height)
|
||||
return;
|
||||
var transaction = moveRow(tr, rect, rect.top, rect.top + 1);
|
||||
if (!transaction)
|
||||
return;
|
||||
editor.view.dispatch(transaction);
|
||||
}
|
||||
function moveRowUp(editor) {
|
||||
var tr = editor.state.tr;
|
||||
var rect = selectedRect(editor.state);
|
||||
if (rect.top === 0)
|
||||
return;
|
||||
var transaction = moveRow(tr, rect, rect.top, rect.top - 1);
|
||||
if (!transaction)
|
||||
return;
|
||||
editor.view.dispatch(transaction);
|
||||
}
|
||||
function moveColumn(tr, rect, from, to) {
|
||||
var fromCells = getColumnCells(rect, from);
|
||||
var toCells = getColumnCells(rect, to);
|
||||
return moveCells(tr, rect, fromCells, toCells);
|
||||
}
|
||||
function getColumnCells(_a, col) {
|
||||
var map = _a.map, table = _a.table;
|
||||
var cells = [];
|
||||
for (var row = 0; row < map.height;) {
|
||||
var index = row * map.width + col;
|
||||
if (index >= map.map.length)
|
||||
break;
|
||||
var pos = map.map[index];
|
||||
var cell = table.nodeAt(pos);
|
||||
if (!cell)
|
||||
continue;
|
||||
cells.push({ cell: cell, pos: pos });
|
||||
row += cell.attrs.rowspan;
|
||||
console.log(cell.textContent);
|
||||
}
|
||||
return cells;
|
||||
}
|
||||
function moveRow(tr, rect, from, to) {
|
||||
var fromCells = getRowCells(rect, from);
|
||||
var toCells = getRowCells(rect, to);
|
||||
return moveCells(tr, rect, fromCells, toCells);
|
||||
}
|
||||
function getRowCells(_a, row) {
|
||||
var map = _a.map, table = _a.table;
|
||||
var cells = [];
|
||||
for (var col = 0, index = row * map.width; col < map.width; col++, index++) {
|
||||
if (index >= map.map.length)
|
||||
break;
|
||||
var pos = map.map[index];
|
||||
var cell = table.nodeAt(pos);
|
||||
if (!cell)
|
||||
continue;
|
||||
cells.push({ cell: cell, pos: pos });
|
||||
col += cell.attrs.colspan - 1;
|
||||
}
|
||||
return cells;
|
||||
}
|
||||
function moveCells(tr, rect, fromCells, toCells) {
|
||||
if (fromCells.length !== toCells.length)
|
||||
return;
|
||||
var mapStart = tr.mapping.maps.length;
|
||||
for (var i = 0; i < toCells.length; ++i) {
|
||||
var fromCell = fromCells[i];
|
||||
var toCell = toCells[i];
|
||||
var fromStart = tr.mapping
|
||||
.slice(mapStart)
|
||||
.map(rect.tableStart + fromCell.pos);
|
||||
var fromEnd = fromStart + fromCell.cell.nodeSize;
|
||||
var fromSlice = tr.doc.slice(fromStart, fromEnd);
|
||||
var toStart = tr.mapping
|
||||
.slice(mapStart)
|
||||
.map(rect.tableStart + toCell.pos);
|
||||
var toEnd = toStart + toCell.cell.nodeSize;
|
||||
var toSlice = tr.doc.slice(toStart, toEnd);
|
||||
tr.replace(toStart, toEnd, fromSlice);
|
||||
fromStart = tr.mapping.slice(mapStart).map(rect.tableStart + fromCell.pos);
|
||||
fromEnd = fromStart + fromCell.cell.nodeSize;
|
||||
tr.replace(fromStart, fromEnd, toSlice);
|
||||
}
|
||||
return tr;
|
||||
}
|
||||
@@ -1,4 +1,3 @@
|
||||
/// <reference types="react" />
|
||||
import { FloatingMenuProps } from "../types";
|
||||
export declare function TableRowFloatingMenu(props: FloatingMenuProps): JSX.Element | null;
|
||||
export declare function TableColumnFloatingMenu(props: FloatingMenuProps): JSX.Element | null;
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
/// <reference types="react" />
|
||||
import { ToolButtonProps } from "../../components/tool-button";
|
||||
import { ToolProps } from "../../types";
|
||||
declare type TableToolProps = ToolProps & {
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
/// <reference types="react" />
|
||||
import { FloatingMenuProps } from "./types";
|
||||
export declare function EditorFloatingMenus(props: FloatingMenuProps): JSX.Element;
|
||||
16
packages/editor/dist/toolbar/menus/index.js
vendored
16
packages/editor/dist/toolbar/menus/index.js
vendored
@@ -1,16 +0,0 @@
|
||||
var __assign = (this && this.__assign) || function () {
|
||||
__assign = Object.assign || function(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||
t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
||||
import { TableRowFloatingMenu } from "./table";
|
||||
export function EditorFloatingMenus(props) {
|
||||
return (_jsx(_Fragment, { children: _jsx(TableRowFloatingMenu, __assign({}, props)) }));
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
/// <reference types="react" />
|
||||
import { FloatingMenuProps } from "./types";
|
||||
export declare function TableRowFloatingMenu(props: FloatingMenuProps): JSX.Element;
|
||||
21
packages/editor/dist/toolbar/menus/table.js
vendored
21
packages/editor/dist/toolbar/menus/table.js
vendored
@@ -1,21 +0,0 @@
|
||||
var __assign = (this && this.__assign) || function () {
|
||||
__assign = Object.assign || function(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||
t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
import { FloatingMenu } from "@tiptap/react";
|
||||
import { Flex, Text } from "rebass";
|
||||
export function TableRowFloatingMenu(props) {
|
||||
var editor = props.editor;
|
||||
return (_jsx(FloatingMenu, __assign({ editor: editor, shouldShow: function (_a) {
|
||||
var editor = _a.editor, state = _a.state;
|
||||
return editor.isActive("tableRow") && state.selection.empty;
|
||||
} }, { children: _jsx(Flex, __assign({ sx: { bg: "background" } }, { children: _jsx(Text, { children: "Hello" }) })) })));
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
import { Editor } from "@tiptap/core";
|
||||
export declare type FloatingMenuProps = {
|
||||
editor: Editor;
|
||||
};
|
||||
1
packages/editor/dist/toolbar/menus/types.js
vendored
1
packages/editor/dist/toolbar/menus/types.js
vendored
@@ -1 +0,0 @@
|
||||
export {};
|
||||
@@ -1,4 +1,3 @@
|
||||
/// <reference types="react" />
|
||||
import { Editor } from "@tiptap/core";
|
||||
declare type CellPropertiesProps = {
|
||||
editor: Editor;
|
||||
|
||||
15
packages/editor/dist/toolbar/popups/embed.d.ts
vendored
15
packages/editor/dist/toolbar/popups/embed.d.ts
vendored
@@ -1,15 +0,0 @@
|
||||
/// <reference types="react" />
|
||||
import { EmbedAlignmentOptions, EmbedAttributes, EmbedSizeOptions } from "../../extensions/embed";
|
||||
import { IconNames } from "../icons";
|
||||
declare type Embed = Required<EmbedAttributes> & EmbedAlignmentOptions;
|
||||
export declare type EmbedPopupProps = {
|
||||
onClose: (embed: Embed) => void;
|
||||
title: string;
|
||||
icon: IconNames;
|
||||
embed?: Embed;
|
||||
onSizeChanged?: (size: EmbedSizeOptions) => void;
|
||||
onSourceChanged?: (src: string) => void;
|
||||
onFloatingChanged?: (float: boolean) => void;
|
||||
};
|
||||
export declare function EmbedPopup(props: EmbedPopupProps): JSX.Element;
|
||||
export {};
|
||||
74
packages/editor/dist/toolbar/popups/embed.js
vendored
74
packages/editor/dist/toolbar/popups/embed.js
vendored
@@ -1,74 +0,0 @@
|
||||
var __assign = (this && this.__assign) || function () {
|
||||
__assign = Object.assign || function(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||
t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
var __read = (this && this.__read) || function (o, n) {
|
||||
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
||||
if (!m) return o;
|
||||
var i = m.call(o), r, ar = [], e;
|
||||
try {
|
||||
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
||||
}
|
||||
catch (error) { e = { error: error }; }
|
||||
finally {
|
||||
try {
|
||||
if (r && !r.done && (m = i["return"])) m.call(i);
|
||||
}
|
||||
finally { if (e) throw e.error; }
|
||||
}
|
||||
return ar;
|
||||
};
|
||||
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
||||
import { Flex, Text } from "rebass";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { Popup } from "../../toolbar/components/popup";
|
||||
import { Toggle } from "../../components/toggle";
|
||||
import { Input } from "@rebass/forms";
|
||||
export function EmbedPopup(props) {
|
||||
var onClose = props.onClose, onSizeChanged = props.onSizeChanged, onFloatingChanged = props.onFloatingChanged, onSourceChanged = props.onSourceChanged, title = props.title, icon = props.icon, embed = props.embed;
|
||||
var _a = __read(useState((embed === null || embed === void 0 ? void 0 : embed.width) || 300), 2), width = _a[0], setWidth = _a[1];
|
||||
var _b = __read(useState((embed === null || embed === void 0 ? void 0 : embed.height) || 150), 2), height = _b[0], setHeight = _b[1];
|
||||
var _c = __read(useState((embed === null || embed === void 0 ? void 0 : embed.src) || ""), 2), src = _c[0], setSrc = _c[1];
|
||||
var _d = __read(useState((embed === null || embed === void 0 ? void 0 : embed.float) || false), 2), isFloating = _d[0], setIsFloating = _d[1];
|
||||
var onSizeChange = useCallback(function (newWidth, newHeight) {
|
||||
var size = newWidth
|
||||
? {
|
||||
width: newWidth,
|
||||
height: newWidth * (height / width),
|
||||
}
|
||||
: newHeight
|
||||
? {
|
||||
width: newHeight * (width / height),
|
||||
height: newHeight,
|
||||
}
|
||||
: {
|
||||
width: 0,
|
||||
height: 0,
|
||||
};
|
||||
setWidth(size.width);
|
||||
setHeight(size.height);
|
||||
if (onSizeChanged)
|
||||
onSizeChanged(size);
|
||||
}, [width, height]);
|
||||
useEffect(function () {
|
||||
onFloatingChanged && onFloatingChanged(isFloating);
|
||||
}, [onFloatingChanged, isFloating]);
|
||||
useEffect(function () {
|
||||
onSourceChanged && onSourceChanged(src);
|
||||
}, [onSourceChanged, src]);
|
||||
return (_jsx(Popup, __assign({ title: title, action: {
|
||||
icon: icon,
|
||||
onClick: function () { return onClose({ height: height, width: width, src: src, float: isFloating }); },
|
||||
} }, { children: _jsxs(Flex, __assign({ sx: { width: 200, flexDirection: "column", p: 1 } }, { children: [_jsx(Input, { value: src, onChange: function (e) { return setSrc(e.target.value); } }), _jsxs(Flex, __assign({ sx: { justifyContent: "space-between", alignItems: "center" } }, { children: [_jsx(Text, __assign({ variant: "body" }, { children: "Floating?" })), _jsx(Toggle, { checked: isFloating, onClick: function () { return setIsFloating(function (s) { return !s; }); } })] })), _jsxs(Flex, __assign({ sx: { alignItems: "center", mt: 2 } }, { children: [_jsx(Input, { type: "number", placeholder: "Width", value: width, sx: {
|
||||
mr: 2,
|
||||
p: 1,
|
||||
fontSize: "body",
|
||||
}, onChange: function (e) { return onSizeChange(e.target.valueAsNumber); } }), _jsx(Input, { type: "number", placeholder: "Height", value: height, sx: { p: 1, fontSize: "body" }, onChange: function (e) { return onSizeChange(undefined, e.target.valueAsNumber); } })] }))] })) })));
|
||||
}
|
||||
@@ -1,4 +1,3 @@
|
||||
/// <reference types="react" />
|
||||
import { EmbedAlignmentOptions, EmbedAttributes, EmbedSizeOptions } from "../../extensions/embed";
|
||||
import { IconNames } from "../icons";
|
||||
declare type Embed = Required<EmbedAttributes> & EmbedAlignmentOptions;
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
/// <reference types="react" />
|
||||
import { ImageAlignmentOptions, ImageSizeOptions } from "../../extensions/image";
|
||||
import { Editor } from "@tiptap/core";
|
||||
export declare type ImagePropertiesProps = ImageSizeOptions & ImageAlignmentOptions & {
|
||||
|
||||
1
packages/editor/dist/toolbar/popups/index.js
vendored
1
packages/editor/dist/toolbar/popups/index.js
vendored
@@ -1 +0,0 @@
|
||||
"use strict";
|
||||
@@ -1,4 +1,3 @@
|
||||
/// <reference types="react" />
|
||||
import { Editor } from "@tiptap/core";
|
||||
export declare type SearchReplacePopupProps = {
|
||||
editor: Editor;
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
/// <reference types="react" />
|
||||
declare type TableSize = {
|
||||
columns: number;
|
||||
rows: number;
|
||||
|
||||
1
packages/editor/dist/toolbar/toolbar.d.ts
vendored
1
packages/editor/dist/toolbar/toolbar.d.ts
vendored
@@ -1,4 +1,3 @@
|
||||
/// <reference types="react" />
|
||||
import { Theme } from "@notesnook/theme";
|
||||
import { Editor } from "@tiptap/core";
|
||||
import { ToolbarLocation } from "./stores/toolbar-store";
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
/// <reference types="react" />
|
||||
import { ToolProps } from "../types";
|
||||
export declare function AlignCenter(props: ToolProps): JSX.Element;
|
||||
export declare function AlignLeft(props: ToolProps): JSX.Element;
|
||||
|
||||
@@ -1,3 +1,2 @@
|
||||
/// <reference types="react" />
|
||||
import { ToolProps } from "../types";
|
||||
export declare function InsertBlock(props: ToolProps): JSX.Element;
|
||||
|
||||
2
packages/editor/dist/toolbar/tools/block.js
vendored
2
packages/editor/dist/toolbar/tools/block.js
vendored
@@ -223,5 +223,5 @@ var tasklist = function (editor) { return ({
|
||||
title: "Task list",
|
||||
icon: "checkbox",
|
||||
isChecked: editor === null || editor === void 0 ? void 0 : editor.isActive("taskList"),
|
||||
onClick: function () { return editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleTaskList().run(); },
|
||||
onClick: function () { return editor === null || editor === void 0 ? void 0 : editor.chain().toggleTaskList().run(); },
|
||||
}); };
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
/// <reference types="react" />
|
||||
import { ToolProps } from "../types";
|
||||
export declare const DEFAULT_COLORS: string[];
|
||||
export declare function Highlight(props: ToolProps): JSX.Element;
|
||||
|
||||
1
packages/editor/dist/toolbar/tools/font.d.ts
vendored
1
packages/editor/dist/toolbar/tools/font.d.ts
vendored
@@ -1,4 +1,3 @@
|
||||
/// <reference types="react" />
|
||||
import { ToolProps } from "../types";
|
||||
export declare function FontSize(props: ToolProps): JSX.Element;
|
||||
export declare function FontFamily(props: ToolProps): JSX.Element;
|
||||
|
||||
@@ -1,3 +1,2 @@
|
||||
/// <reference types="react" />
|
||||
import { ToolProps } from "../types";
|
||||
export declare function Headings(props: ToolProps): JSX.Element;
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
/// <reference types="react" />
|
||||
import { ToolProps } from "../types";
|
||||
export declare function Italic(props: ToolProps): JSX.Element;
|
||||
export declare function Strikethrough(props: ToolProps): JSX.Element;
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
/// <reference types="react" />
|
||||
import { ToolProps } from "../types";
|
||||
export declare function NumberedList(props: ToolProps): JSX.Element;
|
||||
export declare function BulletList(props: ToolProps): JSX.Element;
|
||||
|
||||
2
packages/editor/dist/toolbar/tools/lists.js
vendored
2
packages/editor/dist/toolbar/tools/lists.js
vendored
@@ -55,7 +55,7 @@ export function NumberedList(props) {
|
||||
var options = {
|
||||
type: "orderedList",
|
||||
icon: "numberedList",
|
||||
onClick: function (editor) { return editor.chain().focus().toggleOrderedList().run(); },
|
||||
onClick: function (editor) { return editor.chain().focus().toggleTaskList().run(); },
|
||||
subTypes: [
|
||||
{ type: "decimal", title: "Decimal", items: ["1", "2", "3"] },
|
||||
{ type: "upper-alpha", title: "Upper alpha", items: ["A", "B", "C"] },
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
/// <reference types="react" />
|
||||
import { ToolProps } from "../types";
|
||||
export declare function RightToLeft(props: ToolProps): JSX.Element;
|
||||
export declare function LeftToRight(props: ToolProps): JSX.Element;
|
||||
|
||||
5649
packages/editor/package-lock.json
generated
5649
packages/editor/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -4,35 +4,32 @@
|
||||
"private": true,
|
||||
"main": "./dist/index.js",
|
||||
"dependencies": {
|
||||
"@mdi/js": "^6.6.96",
|
||||
"@mdi/react": "^1.5.0",
|
||||
"@mdi/js": "^6.7.96",
|
||||
"@mdi/react": "^1.6.0",
|
||||
"@notesnook/theme": "file:../themeprovider",
|
||||
"@rebass/forms": "^4.0.6",
|
||||
"@social-embed/lib": "^0.0.1-next.12",
|
||||
"@tiptap/extension-character-count": "^2.0.0-beta.24",
|
||||
"@tiptap/core": "^2.0.0-beta.176",
|
||||
"@tiptap/extension-character-count": "^2.0.0-beta.26",
|
||||
"@tiptap/extension-color": "^2.0.0-beta.9",
|
||||
"@tiptap/extension-font-family": "^2.0.0-beta.21",
|
||||
"@tiptap/extension-highlight": "^2.0.0-beta.33",
|
||||
"@tiptap/extension-history": "^2.0.0-beta.21",
|
||||
"@tiptap/extension-horizontal-rule": "^2.0.0-beta.31",
|
||||
"@tiptap/extension-link": "^2.0.0-beta.36",
|
||||
"@tiptap/extension-link": "^2.0.0-beta.38",
|
||||
"@tiptap/extension-placeholder": "^2.0.0-beta.45",
|
||||
"@tiptap/extension-subscript": "^2.0.0-beta.10",
|
||||
"@tiptap/extension-superscript": "^2.0.0-beta.10",
|
||||
"@tiptap/extension-table": "^2.0.0-beta.48",
|
||||
"@tiptap/extension-table": "^2.0.0-beta.49",
|
||||
"@tiptap/extension-table-cell": "^2.0.0-beta.20",
|
||||
"@tiptap/extension-table-header": "^2.0.0-beta.22",
|
||||
"@tiptap/extension-table-row": "^2.0.0-beta.19",
|
||||
"@tiptap/extension-task-item": "^2.0.0-beta.31",
|
||||
"@tiptap/extension-task-item": "^2.0.0-beta.32",
|
||||
"@tiptap/extension-task-list": "^2.0.0-beta.26",
|
||||
"@tiptap/extension-text-align": "^2.0.0-beta.29",
|
||||
"@tiptap/extension-text-style": "^2.0.0-beta.23",
|
||||
"@tiptap/extension-underline": "^2.0.0-beta.23",
|
||||
"@tiptap/react": "^2.0.0-beta.98",
|
||||
"@tiptap/starter-kit": "^2.0.0-beta.150",
|
||||
"@types/prismjs": "^1.26.0",
|
||||
"@types/rebass": "^4.0.10",
|
||||
"@types/rebass__forms": "^4.0.6",
|
||||
"@tiptap/starter-kit": "^2.0.0-beta.185",
|
||||
"detect-indent": "^7.0.0",
|
||||
"emotion-theming": "^10.0.19",
|
||||
"esm-loader": "^0.1.0",
|
||||
@@ -41,7 +38,9 @@
|
||||
"prism-themes": "^1.9.0",
|
||||
"prismjs": "^1.28.0",
|
||||
"prosemirror-tables": "^1.1.1",
|
||||
"re-resizable": "^6.9.5",
|
||||
"prosemirror-utils": "^0.9.6",
|
||||
"prosemirror-view": "^1.24.1",
|
||||
"re-resizable": "^6.9.9",
|
||||
"react-color": "^2.19.3",
|
||||
"react-modal": "^3.14.4",
|
||||
"react-spring-bottom-sheet": "^3.4.0",
|
||||
@@ -56,11 +55,14 @@
|
||||
"devDependencies": {
|
||||
"@types/esm": "^3.2.0",
|
||||
"@types/node": "^16.11.11",
|
||||
"@types/prismjs": "^1.26.0",
|
||||
"@types/react": "^17.0.37",
|
||||
"@types/react-color": "^3.0.6",
|
||||
"@types/react-dom": "^17.0.11",
|
||||
"@types/react-modal": "^3.13.1",
|
||||
"@types/react-toggle": "^4.0.3",
|
||||
"@types/rebass": "^4.0.10",
|
||||
"@types/rebass__forms": "^4.0.6",
|
||||
"@types/tinycolor2": "^1.4.3",
|
||||
"esm": "^3.2.25",
|
||||
"isomorphic-fetch": "^3.0.0",
|
||||
@@ -68,11 +70,12 @@
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "4.0.3",
|
||||
"ts-node": "^10.8.0",
|
||||
"typescript": "^4.5.2",
|
||||
"typescript": "^4.7.2",
|
||||
"typescript-plugin-css-modules": "^3.4.0",
|
||||
"web-vitals": "^1.1.2"
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsc"
|
||||
"build": "./scripts/build.sh",
|
||||
"watch": "./scripts/build.sh --watch"
|
||||
}
|
||||
}
|
||||
|
||||
3
packages/editor/scripts/build.sh
Executable file
3
packages/editor/scripts/build.sh
Executable file
@@ -0,0 +1,3 @@
|
||||
ln -s $(realpath ./src/styles.css) $(realpath ./dist/)
|
||||
|
||||
yarn tsc --watch
|
||||
@@ -1,3 +1,7 @@
|
||||
/**
|
||||
* Quick & dirty script to download & transform all language details from
|
||||
* the PrismJS repo.
|
||||
*/
|
||||
require("isomorphic-fetch");
|
||||
|
||||
async function main() {
|
||||
@@ -10,14 +14,6 @@ async function main() {
|
||||
for (const key in json.languages) {
|
||||
if (key === "meta") continue;
|
||||
const language = json.languages[key];
|
||||
// if (key === "markup") {
|
||||
// language.alias.forEach((alias) => {
|
||||
// output.push({
|
||||
// filename: key,
|
||||
// title: language.aliasTitles[alias],
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
output.push({
|
||||
filename: key,
|
||||
title: language.title,
|
||||
@@ -342,6 +342,7 @@ export function MenuPresenter(props: PropsWithChildren<MenuPresenterProps>) {
|
||||
return (
|
||||
<Box
|
||||
{...props}
|
||||
//@ts-ignore
|
||||
style={{
|
||||
...props.style,
|
||||
position: isAutocomplete ? "initial" : "fixed",
|
||||
|
||||
@@ -6,7 +6,7 @@ import { Icons } from "../../toolbar/icons";
|
||||
import { MenuItem /*ResolvedMenuItem*/ } from "./types";
|
||||
|
||||
type MenuItemProps = {
|
||||
// item: ResolvedMenuItem<any>;
|
||||
// item: ResolvedMenuItem;
|
||||
item: MenuItem;
|
||||
isFocused: boolean;
|
||||
onMouseEnter: () => void;
|
||||
@@ -79,7 +79,7 @@ function MenuItem(props: MenuItemProps) {
|
||||
<Icon
|
||||
path={Icons[icon]}
|
||||
color={"text"}
|
||||
size={15}
|
||||
size={"medium"}
|
||||
sx={{ mr: 2 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user