@webwriter/quiz 1.0.0

package/dist/widgets/webwriter-mark.js

@@ -0,0 +1,410 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => [, , , __create(base?.[__knownSymbol("metadata")] ?? null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+// src/widgets/webwriter-mark.ts
+import { html, css } from "lit";
+import { action, LitElementWw } from "@webwriter/lit";
+import { customElement, eventOptions, property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import SlIconButton from "@shoelace-style/shoelace/dist/components/icon-button/icon-button.component.js";
+var xPath = function(node, optimized = false) {
+  if (node.nodeType === Node.DOCUMENT_NODE) {
+    return "/";
+  }
+  const steps = [];
+  let contextNode = node;
+  while (contextNode) {
+    const step = _xPathValue(contextNode, optimized);
+    if (!step) {
+      break;
+    }
+    steps.push(step);
+    if (step.optimized) {
+      break;
+    }
+    contextNode = contextNode.parentNode;
+  }
+  steps.reverse();
+  return (steps.length && steps[0].optimized ? "" : "/") + steps.join("/");
+};
+var _xPathValue = function(node, optimized) {
+  let ownValue;
+  const ownIndex = _xPathIndex(node);
+  if (ownIndex === -1) {
+    return null;
+  }
+  switch (node.nodeType) {
+    case Node.ELEMENT_NODE:
+      if (optimized && node.getAttribute("id")) {
+        return new Step('//*[@id="' + node.getAttribute("id") + '"]', true);
+      }
+      ownValue = node.localName;
+      break;
+    case Node.ATTRIBUTE_NODE:
+      ownValue = "@" + node.nodeName;
+      break;
+    case Node.TEXT_NODE:
+    case Node.CDATA_SECTION_NODE:
+      ownValue = "text()";
+      break;
+    case Node.PROCESSING_INSTRUCTION_NODE:
+      ownValue = "processing-instruction()";
+      break;
+    case Node.COMMENT_NODE:
+      ownValue = "comment()";
+      break;
+    case Node.DOCUMENT_NODE:
+      ownValue = "";
+      break;
+    default:
+      ownValue = "";
+      break;
+  }
+  if (ownIndex > 0) {
+    ownValue += "[" + ownIndex + "]";
+  }
+  return new Step(ownValue, node.nodeType === Node.DOCUMENT_NODE);
+};
+var _xPathIndex = function(node) {
+  function areNodesSimilar(left, right) {
+    if (left === right) {
+      return true;
+    }
+    if (left.nodeType === Node.ELEMENT_NODE && right.nodeType === Node.ELEMENT_NODE) {
+      return left.localName === right.localName;
+    }
+    if (left.nodeType === right.nodeType) {
+      return true;
+    }
+    const leftType = left.nodeType === Node.CDATA_SECTION_NODE ? Node.TEXT_NODE : left.nodeType;
+    const rightType = right.nodeType === Node.CDATA_SECTION_NODE ? Node.TEXT_NODE : right.nodeType;
+    return leftType === rightType;
+  }
+  const siblings = node.parentNode ? node.parentNode.children : null;
+  if (!siblings) {
+    return 0;
+  }
+  let hasSameNamedElements;
+  for (let i = 0; i < siblings.length; ++i) {
+    if (areNodesSimilar(node, siblings[i]) && siblings[i] !== node) {
+      hasSameNamedElements = true;
+      break;
+    }
+  }
+  if (!hasSameNamedElements) {
+    return 0;
+  }
+  let ownIndex = 1;
+  for (let i = 0; i < siblings.length; ++i) {
+    if (areNodesSimilar(node, siblings[i])) {
+      if (siblings[i] === node) {
+        return ownIndex;
+      }
+      ++ownIndex;
+    }
+  }
+  return -1;
+};
+var Step = class {
+  constructor(value, optimized = false) {
+    this.value = value;
+    this.optimized = optimized;
+  }
+  toString() {
+    return this.value;
+  }
+};
+function getCaretPositionFromPoint(e) {
+  let range;
+  let textNode;
+  let offset;
+  if (document.caretPositionFromPoint) {
+    range = document.caretPositionFromPoint(e.clientX, e.clientY);
+    textNode = range.offsetNode;
+    offset = range.offset;
+    return { textNode, offset };
+  } else if (document.caretRangeFromPoint) {
+    range = document.caretRangeFromPoint(e.clientX, e.clientY);
+    textNode = range.startContainer;
+    offset = range.startOffset;
+    return { textNode, offset };
+  } else {
+    throw Error("Both 'caretPositionFromPoint' and 'caretRangeFromPoint' are unsupported");
+  }
+}
+var toAttributeRange = (ranges) => {
+  return JSON.stringify(ranges);
+};
+var fromAttributeRange = (attr) => {
+  if (!attr) {
+    return [];
+  }
+  const ranges = JSON.parse(attr);
+  return ranges.map((range) => new SerializableRange(range));
+};
+var SerializableRange = class _SerializableRange extends Range {
+  constructor(value) {
+    super();
+    if (value instanceof _SerializableRange) {
+      return value;
+    } else if (value) {
+      const { startContainer, startOffset, endContainer, endOffset } = typeof value === "string" ? JSON.parse(value) : value;
+      const startNode = document.evaluate(startContainer, document, null, 9, null).singleNodeValue;
+      startNode && this.setStart(startNode, startOffset);
+      const endNode = document.evaluate(endContainer ?? startContainer, document, null, 9, null).singleNodeValue;
+      endNode && this.setEnd(endNode, endOffset);
+    }
+  }
+  toJSON() {
+    return this.startContainer === this.endContainer ? {
+      startContainer: xPath(this.startContainer),
+      startOffset: this.startOffset,
+      endOffset: this.endOffset
+    } : {
+      startContainer: xPath(this.startContainer),
+      startOffset: this.startOffset,
+      endContainer: xPath(this.endContainer),
+      endOffset: this.endOffset
+    };
+  }
+  toString() {
+    return JSON.stringify(this.toJSON());
+  }
+};
+var _handleHighlight_dec, _value_dec, _solution_dec, _highlighting_dec, _a, _WebwriterMark_decorators, _init, _highlighting, _solution, _value, _WebwriterMark_instances, updateHighlight_fn;
+_WebwriterMark_decorators = [customElement("webwriter-mark")];
+var _WebwriterMark = class _WebwriterMark extends (_a = LitElementWw, _highlighting_dec = [property({ type: Boolean, attribute: true, reflect: true })], _solution_dec = [property({ attribute: false })], _value_dec = [property({ attribute: true, reflect: true, converter: { toAttribute: toAttributeRange, fromAttribute: fromAttributeRange } })], _handleHighlight_dec = [eventOptions({ passive: true }), action({ label: { _: "Toggle Highlight" } })], _a) {
+  constructor() {
+    super(...arguments);
+    __runInitializers(_init, 5, this);
+    __privateAdd(this, _WebwriterMark_instances);
+    __publicField(this, "msg", (str) => this.lang in _WebwriterMark.localization ? _WebwriterMark.localization[this.lang][str] ?? str : str);
+    __privateAdd(this, _highlighting, __runInitializers(_init, 8, this, false)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _solution, []);
+    __privateAdd(this, _value, []);
+    __publicField(this, "observer");
+    __publicField(this, "segments", []);
+  }
+  get solution() {
+    return __privateGet(this, _solution);
+  }
+  set solution(value) {
+    __privateMethod(this, _WebwriterMark_instances, updateHighlight_fn).call(this, "solution", value.map((v) => new SerializableRange(v)));
+    this.requestUpdate("solution");
+  }
+  get value() {
+    return __privateGet(this, _value);
+  }
+  set value(value) {
+    __privateMethod(this, _WebwriterMark_instances, updateHighlight_fn).call(this, "value", value.map((v) => new SerializableRange(v)));
+    this.requestUpdate("value");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const segmenter = new Intl.Segmenter(void 0, { granularity: "word" });
+    this.segments = [...segmenter.segment(this.textContent)];
+    this.observer = new MutationObserver(() => {
+      this.value = this.value;
+      this.segments = [...segmenter.segment(this.textContent)];
+    });
+    this.observer.observe(this, { characterData: true, childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.observer?.disconnect();
+  }
+  handleHighlight(e) {
+    if (e && this.isContentEditable && e.type === "click") {
+      return;
+    } else if (e && !this.isContentEditable && e.type === "contextmenu") {
+      return;
+    }
+    const { textNode, offset } = e ? getCaretPositionFromPoint(e) : { textNode: document.getSelection().anchorNode, offset: document.getSelection().anchorOffset };
+    const segment = this.segments.filter((seg) => seg.isWordLike).find(({ index, segment: segment2 }) => index <= offset && offset <= index + segment2.length);
+    if (segment) {
+      const range = new SerializableRange();
+      const start = segment.index;
+      const end = segment.index + segment.segment.length;
+      range.setStart(textNode, start);
+      range.setEnd(textNode, end);
+      const key = this.isContentEditable ? "solution" : "value";
+      const sameRange = this[key].find((r) => r.startContainer === textNode && r.endContainer === textNode && r.startOffset === start && r.endOffset == end);
+      if (sameRange) {
+        this[key] = this[key].filter((r) => r !== sameRange);
+      } else {
+        this[key] = [...this[key], range];
+      }
+      this.dispatchEvent(new CustomEvent("ww-answer-change", {
+        bubbles: true,
+        composed: true
+      }));
+    }
+  }
+  reset() {
+    this.value = this.solution = [];
+  }
+  reportSolution() {
+  }
+  render() {
+    return html`
+      <slot style=${styleMap({ "--ww-placeholder": `"${this.msg("Text to Highlight")}"` })} ?data-empty=${!this.textContent} @click=${this.handleHighlight} @contextmenu=${this.handleHighlight}></slot>
+    `;
+  }
+};
+_init = __decoratorStart(_a);
+_highlighting = new WeakMap();
+_solution = new WeakMap();
+_value = new WeakMap();
+_WebwriterMark_instances = new WeakSet();
+updateHighlight_fn = function(key, value) {
+  const prev = this[key];
+  const finalValue = value.filter((range) => {
+    const isContained = value.some((otherRange) => {
+      if (range === otherRange) {
+        return;
+      }
+      const startsWithin = range.compareBoundaryPoints(Range.START_TO_START, otherRange) > -1;
+      const endsWithin = range.compareBoundaryPoints(Range.END_TO_END, otherRange) <= 0;
+      return startsWithin && endsWithin;
+    });
+    return !isContained && !range.collapsed;
+  });
+  if (key === "value") {
+    __privateSet(this, _value, finalValue);
+  } else {
+    __privateSet(this, _solution, finalValue);
+  }
+  const highlight = _WebwriterMark[key === "value" ? "highlightValue" : "highlightSolution"];
+  for (const range of prev) {
+    highlight.delete(range);
+  }
+  for (const range of value) {
+    highlight.add(range);
+  }
+};
+__decorateElement(_init, 4, "highlighting", _highlighting_dec, _WebwriterMark, _highlighting);
+__decorateElement(_init, 3, "solution", _solution_dec, _WebwriterMark);
+__decorateElement(_init, 3, "value", _value_dec, _WebwriterMark);
+__decorateElement(_init, 1, "handleHighlight", _handleHighlight_dec, _WebwriterMark);
+_WebwriterMark = __decorateElement(_init, 0, "WebwriterMark", _WebwriterMark_decorators, _WebwriterMark);
+__publicField(_WebwriterMark, "shadowRootOptions", { ...LitElementWw.shadowRootOptions, delegatesFocus: false });
+__publicField(_WebwriterMark, "localization", {});
+// @ts-ignore: Experimental API
+__publicField(_WebwriterMark, "highlightValue", new Highlight());
+// @ts-ignore: Experimental API
+__publicField(_WebwriterMark, "highlightSolution", new Highlight());
+CSS.highlights.set("webwriter-mark-solution", _WebwriterMark.highlightSolution);
+CSS.highlights.set("webwriter-mark-value", _WebwriterMark.highlightValue);
+__publicField(_WebwriterMark, "scopedElements", {
+  "sl-icon-button": SlIconButton
+});
+__publicField(_WebwriterMark, "styles", css`
+    :host {
+      min-height: 1rem;
+      position: relative;
+    }
+
+    slot {
+      display: block;
+      cursor: text;
+    }
+
+    :host(:not([contenteditable=true]):not([contenteditable=""])) slot {
+      cursor: pointer;
+      user-select: none;
+    }
+
+    #highlight {
+      position: absolute;
+      right: 0;
+      top: 0;
+      background: rgba(255, 255, 255, 0.85)
+    }
+
+    slot[data-empty]:after {
+      content: var(--ww-placeholder);
+      position: absolute;
+      left: 0;
+      top: 0;
+      color: darkgray;
+      pointer-events: none;
+      user-select: none;
+    }
+
+    #highlight::part(base):hover {
+      background: yellow;
+    }
+
+    :host ::highlight(webwriter-mark-value) {
+      background-color: yellow;
+    }
+
+    :host ::highlight(webwriter-mark-solution) {
+      background-color: greenyellow;
+    }
+
+    #highlight[data-highlighting]::part(base) {
+      background-color: lightyellow;
+    }
+
+    :host(:has(#highlight[data-highlighting])) ::selection {
+      background: lightyellow !important;
+    }
+
+    :host([highlighting]) #highlight::part(base) {
+      background: yellow;
+    }
+  `);
+__runInitializers(_init, 1, _WebwriterMark);
+var WebwriterMark = _WebwriterMark;
+export {
+  WebwriterMark,
+  xPath
+};