markupeditor 0.9.0

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "markupeditor",
+  "version": "0.9.0",
+  "description": "A web component and API for WYSIWYG HTML editing.",
+  "keywords": [
+    "wysiwyg",
+    "editor",
+    "html",
+    "web-component",
+    "rich-text"
+  ],
+  "main": "dist/markup-editor.js",
+  "module": "dist/markup-editor.js",
+  "type": "module",
+  "bin": {
+    "muedit": "bin/muedit.js"
+  },
+  "files": [
+    "dist",
+    "bin",
+    "styles"
+  ],
+  "license": "MIT",
+  "author": "Steven G. Harris <steven.g.harris@gmail.com>",
+  "homepage": "https://stevengharris.github.io/markupeditor-base/",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/stevengharris/markupeditor-base.git"
+  },
+  "dependencies": {
+    "crelt": "^1.0.6",
+    "prosemirror-commands": "^1.0.0",
+    "prosemirror-dropcursor": "^1.8.1",
+    "prosemirror-gapcursor": "^1.3.2",
+    "prosemirror-history": "^1.2.2",
+    "prosemirror-inputrules": "^1.4.0",
+    "prosemirror-model": "^1.23.0",
+    "prosemirror-schema-basic": "^1.2.3",
+    "prosemirror-schema-list": "^1.4.1",
+    "prosemirror-search": "^1.0.0",
+    "prosemirror-state": "^1.4.3",
+    "prosemirror-tables": "^1.6.1",
+    "prosemirror-transform": "^1.10.4",
+    "prosemirror-view": "^1.34.3"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "@eslint/js": "^9.35.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "eslint": "^9.35.0",
+    "express": "^5.1.0",
+    "jsdoc": "^4.0.5",
+    "jsdom": "^27.0.1",
+    "modern-jsdoc-template": "^1.0.0",
+    "rollup": "^4.31.0",
+    "rollup-plugin-import-css": "4.0.1",
+    "vitest": "^3.2.4"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "test": "vitest run ./test/*.js",
+    "pretest": "npm run build",
+    "docs": "node ./docs/index.js",
+    "predocs": "sh predocs.sh && jsdoc -c jsdoc.json",
+    "analyze": "cem analyze --config custom-elements-manifest.config.js"
+  },
+  "customElements": "dist/custom-elements.json"
+}

package/styles/markup.css

@@ -0,0 +1,273 @@
+#editor, .editor {
+    font-family: system-ui, sans-serif;
+    background: white;
+    color: black;
+    background-clip: padding-box;
+    margin: -8px;        /* Set so that the .ProseMirror padding starts from edges */
+    --padBottom: 0;                     /* MU.padBottom() sets this value in px based on fullHeight */
+    padding-block: 0 var(--padBottom);
+    overflow-x: clip;
+    overflow-y: scroll;
+    height: 100vh;
+    padding-right: 12px;
+}
+@media (prefers-color-scheme: dark) {
+  #editor, .editor {
+    background: black;
+    color: white;
+  }
+}
+
+body {
+    font-family: system-ui, sans-serif;
+}
+
+a {
+    color: blue;
+    text-decoration: none;
+}
+@media (prefers-color-scheme: dark) {
+    a {
+        color: #4183c4;
+    }
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+p, pre {
+    font-size: 1.0rem;
+}
+
+p, ul, ol, dl, table, pre {
+    margin: 0 0 15px;
+}
+
+ul, ol {
+    padding-left: 30px;
+}
+
+h1 {
+    font-size: 2.5rem;
+}
+
+h2 {
+    font-size: 2.0rem;
+}
+
+h3 {
+    font-size: 1.5rem;
+}
+
+h4 {
+    font-size: 1.2rem;
+}
+
+h5 {
+    font-size: 1.0rem;
+}
+
+h6 {
+    font-size: .83rem;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-weight: bold;
+    margin: 0 0 10px 0;
+}
+
+h1 + p, h2 + p, h3 + p {
+    margin-top: 10px;
+}
+
+table {
+    table-layout: fixed;
+    border-collapse: collapse;
+    width: 100%;
+}
+
+table th, table td {
+    padding: 4px;
+}
+
+table th {
+    font-weight: normal;    /* The default is bold, but we want to use paragraph styles and formatting */
+}
+
+/* Make the styling compact inside of a table */
+table p, table h1, table h2, table h3, table h4, table h5, table h6 {
+    margin: 0;
+}
+
+/* Table bordering options */
+.bordered-table-none {
+    border: none;
+}
+
+.bordered-table-outer, .bordered-table-header, .bordered-table-cell {
+    border: 1px solid #DDD;
+}
+
+.bordered-table-header th {   /* border th not thead to refresh properly */
+    border: 1px solid #DDD;
+}
+
+.bordered-table-cell th, .bordered-table-cell td {
+    border: 1px solid #DDD;
+}
+
+/* Default table bordering is same as .bordered-table-cell but is only used when not specified */
+table:not(.bordered-table-none, .bordered-table-outer, .bordered-table-header, .bordered-table-cell) {
+    border: 1px solid #DDD;
+}
+
+table:not(.bordered-table-none, .bordered-table-outer, .bordered-table-header, .bordered-table-cell) td {
+    border: 1px solid #DDD;
+}
+
+table:not(.bordered-table-none, .bordered-table-outer, .bordered-table-header, .bordered-table-cell) th {
+    border: 1px solid #DDD;
+}
+
+li p {
+    margin: 0px 0;
+}
+
+blockquote {
+    margin-right: 0px; /* Because nested blockquotes just keep getting narrower */
+}
+
+code {
+    overflow-x: scroll;
+    display: block;
+    background-color: #F8F8F8;
+    border-radius: 3px;
+    font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace;
+    white-space: pre;
+}
+@media (prefers-color-scheme: dark) {
+    code {
+        background-color: #808080;
+    }
+}
+
+p code, h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
+    display: inline;
+}
+
+.resize-container {
+    position: relative;
+    display: inline-block;
+    margin: 0;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+/* Provide a slightly darkened or lightened overlay while search is active */
+.searching {
+    background-color: rgba(0, 0, 0, 0.10);
+}
+@media (prefers-color-scheme: dark) {
+    .searching {
+        background: rgba(255, 255, 255, 0.10);
+    }
+}
+
+.resize-container img {
+    display: block;
+    outline: 1px black dashed;
+    outline-offset: 4px;
+    outline-width: 1px;
+}
+@media (prefers-color-scheme: dark) {
+    .resize-container img {
+        outline: 1px white dashed;
+    }
+}
+
+.resize-handle-nw,
+.resize-handle-ne,
+.resize-handle-sw,
+.resize-handle-se {
+    position: absolute;
+    display: block;
+    width: 6px;
+    height: 6px;
+    outline: 1px black solid;
+    background: white;
+    z-index: 999;
+}
+@media (prefers-color-scheme: dark) {
+    .resize-handle-nw,
+    .resize-handle-ne,
+    .resize-handle-sw,
+    .resize-handle-se {
+        outline: 1px white solid;
+        background: black;
+    }
+}
+
+/* A transparent child for each resize-handle that expands the clickable area */
+.resize-handle-nw:after,
+.resize-handle-ne:after,
+.resize-handle-sw:after,
+.resize-handle-se:after {
+  content: "";
+  position: absolute;
+  left: -5px;
+  top: -5px;
+  width: 16px;
+  height: 16px;
+}
+
+/* The *-resize cursors do not work, at least in MacCatalyst.
+ * Still specifying them below. They default to a pointer instead
+ */
+.resize-handle-nw {
+    cursor: nw-resize;
+    top: -8px;
+    left: -7px;
+}
+
+.resize-handle-ne {
+    cursor: ne-resize;
+    top: -8px;
+    right: -7px;
+}
+
+.resize-handle-sw {
+    cursor: sw-resize;
+    bottom: -8px;
+    left: -7px;
+}
+
+.resize-handle-se {
+    cursor: se-resize;
+    bottom: -8px;
+    right: -7px;
+}
+
+.placeholder[placeholder]:before {
+    content: attr(placeholder);
+    position: absolute;
+    color: #ccc;
+}
+
+/* Classes set by prosemirror-search module, modified for MarkupEditor */
+/* Note the dark and light mode are the same */
+
+.ProseMirror-search-match {
+  background-color: yellow;
+  color: black;
+}
+
+.ProseMirror-active-search-match {
+  background-color: orange;
+  color: black;
+  outline: 1px orangered solid;
+  z-index: 2;
+}

package/styles/markupeditor.css

@@ -0,0 +1,3 @@
+@import url("mirror.css");
+@import url("markup.css");
+@import url("toolbar.css");

package/styles/mirror.css

@@ -0,0 +1,190 @@
+/**
+ The CSS here was adapted from the ProseMirror example.
+ The adaptations mainly consisted of removing styling when it interfered with
+ markup.css in some way. These changes were commented-out and moved to the end of
+ this file. Top-level Prosemirror styling was brought to the top of the file.
+ Styling from search.css in prosemirror-search were added and modified.
+ */
+
+ .ProseMirror {
+    position: relative;
+    padding: 4px 8px 4px 8px;
+    line-height: 1.2;
+    outline: none;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    white-space: break-spaces;
+    font-variant-ligatures: none;
+  }
+  
+  .ProseMirror pre {
+    white-space: pre-wrap;
+  }
+  
+  .ProseMirror li {
+    position: relative;
+  }
+  
+  .ProseMirror-hideselection *::selection { background: transparent; }
+  .ProseMirror-hideselection *::-moz-selection { background: transparent; }
+  .ProseMirror-hideselection { caret-color: transparent; }
+  
+  /* See https://github.com/ProseMirror/prosemirror/issues/1421#issuecomment-1759320191 */
+  .ProseMirror [draggable][contenteditable=false] { user-select: text }
+  
+  .ProseMirror-selectednode {
+    outline: 2px solid #8cf;
+  }
+  
+  /* Make sure li selections wrap around markers */
+  
+  li.ProseMirror-selectednode {
+    outline: none;
+  }
+  
+  li.ProseMirror-selectednode:after {
+    content: "";
+    position: absolute;
+    left: -32px;
+    right: -2px; top: -2px; bottom: -2px;
+    border: 2px solid #8cf;
+    pointer-events: none;
+  }
+  
+  /* Protect against generic img rules */
+  
+  img.ProseMirror-separator {
+    display: inline !important;
+    border: none !important;
+    margin: 0 !important;
+  }
+  .ProseMirror-textblock-dropdown {
+    min-width: 3em;
+  }
+  
+  .ProseMirror-icon svg {
+    fill: currentColor;
+    height: 1em;
+  }
+  
+  .ProseMirror-icon span {
+    vertical-align: text-top;
+  }
+  .ProseMirror-gapcursor {
+    display: none;
+    pointer-events: none;
+    position: absolute;
+  }
+  
+  .ProseMirror-gapcursor:after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: -2px;
+    width: 20px;
+    border-top: 1px solid black;
+    animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+  }
+  
+  @keyframes ProseMirror-cursor-blink {
+    to {
+      visibility: hidden;
+    }
+  }
+  
+  .ProseMirror-focused .ProseMirror-gapcursor {
+    display: block;
+  }
+  
+  .ProseMirror-prompt {
+    background: white;
+    padding: 5px 10px 5px 15px;
+    border: 1px solid silver;
+    position: fixed;
+    border-radius: 3px;
+    z-index: 11;
+    box-shadow: -.5px 2px 5px rgba(0, 0, 0, .2);
+  }
+  
+  .ProseMirror-prompt h5 {
+    margin: 0;
+    font-weight: normal;
+    font-size: 100%;
+    color: #444;
+  }
+  
+  .ProseMirror-prompt input[type="text"],
+  .ProseMirror-prompt textarea {
+    background: #eee;
+    border: none;
+    outline: none;
+  }
+  
+  .ProseMirror-prompt input[type="text"] {
+    padding: 0 4px;
+  }
+  
+  .ProseMirror-prompt-close {
+    position: absolute;
+    left: 2px; top: 1px;
+    color: #666;
+    border: none; background: transparent; padding: 0;
+  }
+  
+  .ProseMirror-prompt-close:after {
+    content: "✕";
+    font-size: 12px;
+  }
+  
+  .ProseMirror-invalid {
+    background: #ffc;
+    border: 1px solid #cc7;
+    border-radius: 4px;
+    padding: 5px 10px;
+    position: absolute;
+    min-width: 10em;
+  }
+  
+  .ProseMirror-prompt-buttons {
+    margin-top: 5px;
+    /* display: none; */
+  }
+  
+  /*
+   
+  #editor, .editor {
+    border-radius: 4px;
+    border: 2px solid rgba(0, 0, 0, 0.2);
+  }
+  
+  .ProseMirror-example-setup-style hr {
+    padding: 2px 10px;
+    border: none;
+    margin: 1em 0;
+  }
+  
+  .ProseMirror-example-setup-style hr:after {
+    content: "";
+    display: block;
+    height: 1px;
+    background-color: silver;
+    line-height: 2px;
+  }
+  
+  .ProseMirror ul, .ProseMirror ol {
+    padding-left: 30px;
+  }
+  
+  .ProseMirror blockquote {
+    padding-left: 1em;
+    border-left: 3px solid #eee;
+    margin-left: 0; margin-right: 0;
+  }
+  
+  .ProseMirror-example-setup-style img {
+    cursor: default;
+  }
+  
+  .ProseMirror p { margin-bottom: 1em }
+  */
+