@eventuras/scribo 0.8.2 → 0.10.7

package/src/ui/DropDown.tsx

@@ -6,19 +6,11 @@
  *
  */
 
-import type {JSX} from 'react';
-
-import {isDOMNode} from 'lexical';
+import { isDOMNode } from 'lexical';
+import type { JSX } from 'react';
 import * as React from 'react';
-import {
-  ReactNode,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import {createPortal} from 'react-dom';
+import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 
 type DropDownContextType = {
   registerItem: (ref: React.RefObject<HTMLButtonElement>) => void;
@@ -47,21 +39,16 @@ export function DropDownItem({
     throw new Error('DropDownItem must be used within a DropDown');
   }
 
-  const {registerItem} = dropDownContext;
+  const { registerItem } = dropDownContext;
 
   useEffect(() => {
-    if (ref && ref.current) {
+    if (ref?.current) {
       registerItem(ref as React.RefObject<HTMLButtonElement>);
     }
   }, [ref, registerItem]);
 
   return (
-    <button
-      className={className}
-      onClick={onClick}
-      ref={ref}
-      title={title}
-      type="button">
+    <button className={className} onClick={onClick} ref={ref} title={title} type="button">
       {children}
     </button>
   );
@@ -71,20 +58,19 @@ function DropDownItems({
   children,
   dropDownRef,
   onClose,
-}: {
+}: Readonly<{
   children: React.ReactNode;
   dropDownRef: React.Ref<HTMLDivElement>;
   onClose: () => void;
-}) {
+}>) {
   const [items, setItems] = useState<React.RefObject<HTMLButtonElement>[]>();
-  const [highlightedItem, setHighlightedItem] =
-    useState<React.RefObject<HTMLButtonElement>>();
+  const [highlightedItem, setHighlightedItem] = useState<React.RefObject<HTMLButtonElement>>();
 
   const registerItem = useCallback(
     (itemRef: React.RefObject<HTMLButtonElement>) => {
       setItems((prev) => (prev ? [...prev, itemRef] : [itemRef]));
     },
-    [setItems],
+    [setItems]
   );
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -122,7 +108,7 @@ function DropDownItems({
     () => ({
       registerItem,
     }),
-    [registerItem],
+    [registerItem]
   );
 
   useEffect(() => {
@@ -130,7 +116,7 @@ function DropDownItems({
       setHighlightedItem(items[0]);
     }
 
-    if (highlightedItem && highlightedItem.current) {
+    if (highlightedItem?.current) {
       highlightedItem.current.focus();
     }
   }, [items, highlightedItem]);
@@ -167,7 +153,7 @@ export default function DropDown({
 
   const handleClose = () => {
     setShowDropDown(false);
-    if (buttonRef && buttonRef.current) {
+    if (buttonRef?.current) {
       buttonRef.current.focus();
     }
   };
@@ -177,12 +163,9 @@ export default function DropDown({
     const dropDown = dropDownRef.current;
 
     if (showDropDown && button !== null && dropDown !== null) {
-      const {top, left} = button.getBoundingClientRect();
+      const { top, left } = button.getBoundingClientRect();
       dropDown.style.top = `${top + button.offsetHeight + dropDownPadding}px`;
-      dropDown.style.left = `${Math.min(
-        left,
-        window.innerWidth - dropDown.offsetWidth - 20,
-      )}px`;
+      dropDown.style.left = `${Math.min(left, window.innerWidth - dropDown.offsetWidth - 20)}px`;
     }
   }, [dropDownRef, buttonRef, showDropDown]);
 
@@ -196,7 +179,7 @@ export default function DropDown({
           return;
         }
         if (stopCloseOnClickSelf) {
-          if (dropDownRef.current && dropDownRef.current.contains(target)) {
+          if (dropDownRef.current?.contains(target)) {
             return;
           }
         }
@@ -218,7 +201,7 @@ export default function DropDown({
         const button = buttonRef.current;
         const dropDown = dropDownRef.current;
         if (button !== null && dropDown !== null) {
-          const {top} = button.getBoundingClientRect();
+          const { top } = button.getBoundingClientRect();
           const newPosition = top + button.offsetHeight + dropDownPadding;
           if (newPosition !== dropDown.getBoundingClientRect().top) {
             dropDown.style.top = `${newPosition}px`;
@@ -242,11 +225,10 @@ export default function DropDown({
         aria-label={buttonAriaLabel || buttonLabel}
         className={buttonClassName}
         onClick={() => setShowDropDown(!showDropDown)}
-        ref={buttonRef}>
+        ref={buttonRef}
+      >
         {buttonIconClassName && <span className={buttonIconClassName} />}
-        {buttonLabel && (
-          <span className="text dropdown-button-text">{buttonLabel}</span>
-        )}
+        {buttonLabel && <span className="text dropdown-button-text">{buttonLabel}</span>}
         <i className="chevron-down" />
       </button>
 
@@ -255,8 +237,8 @@ export default function DropDown({
           <DropDownItems dropDownRef={dropDownRef} onClose={handleClose}>
             {children}
           </DropDownItems>,
-          document.body,
+          document.body
         )}
     </>
   );
-}
+}

package/src/ui/Placeholder.tsx

@@ -1,21 +1,21 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import type {JSX} from 'react';
-import "./Placeholder.css";
-
-import { ReactNode } from "react";
-
-export default function Placeholder({
-  children,
-  className,
-}: {
-  children: ReactNode;
-  className?: string;
-}): JSX.Element {
-  return <div className={className || "Placeholder__root"}>{children}</div>;
-}
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { JSX } from 'react';
+import './Placeholder.css';
+
+import type { ReactNode } from 'react';
+
+export default function Placeholder({
+  children,
+  className,
+}: Readonly<{
+  children: ReactNode;
+  className?: string;
+}>): JSX.Element {
+  return <div className={className || 'Placeholder__root'}>{children}</div>;
+}

package/src/utils/environment.ts

@@ -7,9 +7,7 @@
  */
 
 export const CAN_USE_DOM: boolean =
-  typeof window !== "undefined" &&
-  typeof window.document !== "undefined" &&
-  typeof window.document.createElement !== "undefined";
+  typeof window !== 'undefined' && typeof window.document?.createElement !== 'undefined';
 
 declare global {
   interface Document {
@@ -21,8 +19,7 @@ declare global {
   }
 }
 
-const documentMode =
-  CAN_USE_DOM && "documentMode" in document ? document.documentMode : null;
+const documentMode = CAN_USE_DOM && 'documentMode' in document ? document.documentMode : null;
 
 //TODO forcing false on this to stop mismatch render between ssr and clientside
 export const IS_APPLE = false;
@@ -32,22 +29,19 @@ export const IS_FIREFOX: boolean =
   CAN_USE_DOM && /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);
 
 export const CAN_USE_BEFORE_INPUT: boolean =
-  CAN_USE_DOM && "InputEvent" in window && !documentMode
-    ? "getTargetRanges" in new window.InputEvent("input")
+  CAN_USE_DOM && 'InputEvent' in window && !documentMode
+    ? 'getTargetRanges' in new window.InputEvent('input')
     : false;
 
 export const IS_SAFARI: boolean =
   CAN_USE_DOM && /Version\/[\d.]+.*Safari/.test(navigator.userAgent);
 
 export const IS_IOS: boolean =
-  CAN_USE_DOM &&
-  /iPad|iPhone|iPod/.test(navigator.userAgent) &&
-  !window.MSStream;
+  CAN_USE_DOM && /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
 
 // Keep these in case we need to use them in the future.
 // export const IS_WINDOWS: boolean = CAN_USE_DOM && /Win/.test(navigator.platform);
-export const IS_CHROME: boolean =
-  CAN_USE_DOM && /^(?=.*Chrome).*/i.test(navigator.userAgent);
+export const IS_CHROME: boolean = CAN_USE_DOM && /^(?=.*Chrome).*/i.test(navigator.userAgent);
 // export const canUseTextInputEvent: boolean = CAN_USE_DOM && 'TextEvent' in window && !documentMode;
 
 export const IS_APPLE_WEBKIT =

package/src/utils/getSelectedNode.ts

@@ -6,12 +6,10 @@
  *
  * source: https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/utils/getSelectedNode.ts
  */
-import { $isAtNodeEnd } from "@lexical/selection";
-import { ElementNode, RangeSelection, TextNode } from "lexical";
+import { $isAtNodeEnd } from '@lexical/selection';
+import type { ElementNode, RangeSelection, TextNode } from 'lexical';
 
-export function getSelectedNode(
-  selection: RangeSelection,
-): TextNode | ElementNode {
+export function getSelectedNode(selection: RangeSelection): TextNode | ElementNode {
   const anchor = selection.anchor;
   const focus = selection.focus;
   const anchorNode = selection.anchor.getNode();

package/src/utils/setFloatingElemPosition.ts

@@ -14,7 +14,7 @@ export function setFloatingElemPosition(
   anchorElem: HTMLElement,
   isLink: boolean = false,
   verticalGap: number = VERTICAL_GAP,
-  horizontalOffset: number = HORIZONTAL_OFFSET,
+  horizontalOffset: number = HORIZONTAL_OFFSET
 ): void {
   const scrollerElem = anchorElem.parentElement;
 
@@ -33,10 +33,7 @@ export function setFloatingElemPosition(
 
   if (top < editorScrollerRect.top) {
     // adjusted height for link element if the element is at top
-    top +=
-      floatingElemRect.height +
-      targetRect.height +
-      verticalGap * (isLink ? 9 : 2);
+    top += floatingElemRect.height + targetRect.height + verticalGap * (isLink ? 9 : 2);
   }
 
   if (left + floatingElemRect.width > editorScrollerRect.right) {

package/src/utils/setFloatingElemPositionForLinkEditor.ts

@@ -13,7 +13,7 @@ export function setFloatingElemPositionForLinkEditor(
   floatingElem: HTMLElement,
   anchorElem: HTMLElement,
   verticalGap: number = VERTICAL_GAP,
-  horizontalOffset: number = HORIZONTAL_OFFSET,
+  horizontalOffset: number = HORIZONTAL_OFFSET
 ): void {
   const scrollerElem = anchorElem.parentElement;
 

package/src/utils/url.ts

@@ -7,20 +7,14 @@
  * Source: https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/utils/url.ts
  */
 
-const SUPPORTED_URL_PROTOCOLS = new Set([
-  "http:",
-  "https:",
-  "mailto:",
-  "sms:",
-  "tel:",
-]);
+const SUPPORTED_URL_PROTOCOLS = new Set(['http:', 'https:', 'mailto:', 'sms:', 'tel:']);
 
 export function sanitizeUrl(url: string): string {
   try {
     const parsedUrl = new URL(url);
     // eslint-disable-next-line no-script-url
     if (!SUPPORTED_URL_PROTOCOLS.has(parsedUrl.protocol)) {
-      return "about:blank";
+      return 'about:blank';
     }
   } catch {
     return url;
@@ -30,10 +24,10 @@ export function sanitizeUrl(url: string): string {
 
 // Source: https://stackoverflow.com/a/8234912/2013580
 const urlRegExp = new RegExp(
-  /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/,
+  /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-]*)?\??(?:[-+=&;%@.\w]*)#?(?:\w*))?)/
 );
 export function validateUrl(url: string): boolean {
   // TODO Fix UI for link insertion; it should never default to an invalid URL such as https://.
   // Maybe show a dialog where they user can type the URL before inserting it.
-  return url === "https://" || urlRegExp.test(url);
+  return url === 'https://' || urlRegExp.test(url);
 }

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@eventuras/typescript-config/react-library.json",
+  "compilerOptions": {
+    "rootDir": "src"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/CHANGELOG.md

@@ -1,59 +0,0 @@
-# @eventuras/scribo
-
-## 0.8.2
-
-### Patch Changes
-
-- chore: update deps
-
-## 0.8.1
-
-### Patch Changes
-
-- chore: update dependencies across frontend packages
-
-## 0.8.0
-
-### Minor Changes
-
-### 🧱 Features
-
-- feat(scribo): auto heigh expanding (6ca2322) [@eventuras/scribo]
-
-### 🐞 Bug Fixes
-
-- fix(scribo): import MarkdownEditor.css for styling (d1eec7a) [@eventuras/scribo]
-- fix(scribo): disable swc in scribo (ebce6db) [@eventuras/scribo]
-
-### ♻️ Refactoring
-
-- refactor(scribo): merge markdowninput into scribo with flexible styling (373587e) [@eventuras/scribo]
-
-### 🧹 Maintenance
-
-- chore(scribo): externalize Lexical packages in build configuration (7c7caaf) [@eventuras/scribo]
-- chore(convertoapi,docsite,web,markdown,scribo,sdk): upgrade deps (b2de638) [@eventuras/scribo]
-
-### ⚙️ CI/CD
-
-- ci(scribo): implement automated release workflow for Scribo (36d6ba1) [@eventuras/scribo]
-
-## 0.7.1
-
-### Patch Changes
-
-- - chore(convertoapi,docsite,web,markdown,scribo,sdk): upgrade deps (51e931b) [@eventuras/scribo]
-
-## 0.7.0
-
-### Minor Changes
-
-- ## Initial history (pre-Changesets)
-  - chore(scribo): upgrade lexical (f78dfa1)
-  - chore(scribo): update packages (3475e0f)
-  - feat(scribo): use readme as default content of editor page (428fc2b)
-  - fix(scribo): add dependency (101954b)
-  - feat(scribo): cache npm files for scribo build (a065b61)
-  - feat(scribo): add undo/redo to markdown editor (b2482cc)
-  - feat(scribo): adds links and link editing to editor (afe159d)
-  - feat(scribo): set up scribo demo site (a467bc2)

package/README.md

@@ -1,126 +0,0 @@
-# Scribo markdown editor
-
-Markdown editor built on [Lexical framework](https://lexical.dev/). Intended to be used as part of eventuras, but also packed as a standalone component. Scribo is a WYSIWYG editor with markdown export.
-
-The editor should provide simple and intuitive editing of markdown text, with a focus on the most common use cases.
-
-Test the [scribo editor online demo](https://scribo.losol.no/).
-
-> **Lexical version**: we are keeping the lexical version in sync with the [lexical version used in Payload CMS](https://github.com/payloadcms/payload/blob/main/packages/richtext-lexical/package.json), to prevent multiple versions making trouble.
-
-## Installation
-
-```bash
-pnpm add @eventuras/scribo
-```
-
-## Usage
-
-**Important**: You must import the CSS file for Scribo to display correctly:
-
-### MarkdownEditor (WYSIWYG Editor)
-
-```tsx
-import "@eventuras/scribo/style.css";
-import { MarkdownEditor } from "@eventuras/scribo";
-
-function MyComponent() {
-  return <MarkdownEditor defaultValue="# Hello World" />;
-}
-```
-
-### MarkdownInput (Form-ready Input)
-
-For use with native HTML forms (FormData API):
-
-```tsx
-import "@eventuras/scribo/style.css";
-import { MarkdownInput } from "@eventuras/scribo";
-
-function MyForm() {
-  return (
-    <form>
-      <MarkdownInput
-        name="description"
-        label="Description"
-        placeholder="Enter markdown..."
-        defaultValue="# Hello"
-        maxLength={500}
-        className="mb-4"
-        labelClassName="font-bold"
-        editorClassName="border rounded"
-        errorClassName="text-red-500"
-      />
-      <button type="submit">Submit</button>
-    </form>
-  );
-}
-```
-
-The `MarkdownInput` component is framework-agnostic and provides:
-
-- Hidden input for FormData submission
-- Optional label and validation
-- Flexible styling via className props
-- Character limit validation
-
-### Peer Dependencies
-
-Scribo requires the following peer dependencies:
-
-```bash
-pnpm add react react-dom lexical @lexical/code @lexical/hashtag @lexical/link @lexical/list @lexical/mark @lexical/markdown @lexical/overflow @lexical/react @lexical/rich-text @lexical/selection @lexical/table @lexical/utils prismjs
-```
-
-**Prism.js for syntax highlighting:**  
-Scribo uses Prism.js for code syntax highlighting but does not bundle it. You need to install `prismjs` and import the language grammars you need in your application.
-
-Example:
-
-```tsx
-import "prismjs";
-import "prismjs/components/prism-javascript";
-import "prismjs/components/prism-typescript";
-import "prismjs/components/prism-css";
-// Import other languages as needed
-```
-
-## Develop
-
-To start developing Scribo, run the following commands:
-
-```bash
-pnpm install
-vite dev
-```
-
-## Release
-
-Quick release process:
-
-```bash
-# 1. Create changeset (choose one)
-pnpm changeset                 # Manual (recommended)
-pnpm changeset:suggest         # Auto-generate from commits
-
-# 2. Version package
-pnpm changeset:version
-
-# 3. Commit and push (create PR to main)
-git checkout -b release/scribo-v0.x.x
-git add .
-git commit -m "chore(scribo): release v0.x.x"
-git push origin release/scribo-v0.x.x
-
-# 4. Merge PR to main, then automated workflow will publish to npm and create GitHub release
-```
-
-For detailed release instructions, including setup and troubleshooting, see [RELEASE.md](./RELEASE.md).
-
-## Credits
-
-Scribo is built on the [Lexical framework](https://lexical.dev/), and most of the code in the repo is done by [Meta under MIT license](https://github.com/facebook/lexical).
-
-## Learn More
-
-- [Lexical](https://lexical.dev/)

package/RELEASE.md

@@ -1,102 +0,0 @@
-# Release Instructions for @eventuras/scribo
-
-This document explains how to configure the automated release workflow for `@eventuras/scribo`.
-
-## Release Process
-
-### Standard Release
-
-1. **Create changesets** for your changes:
-
-   ```bash
-   # Option A: Manual (recommended for better changelog messages)
-   pnpm changeset
-   
-   # Option B: Auto-generate from commits (review and edit after)
-   pnpm changeset:suggest
-   ```
-
-   > **Tip**: `changeset:suggest` analyzes your git commits since the last release and automatically generates changeset files. Review the generated changesets and edit them for clarity if needed.
-
-2. **Version the package** when ready:
-
-   ```bash
-   pnpm changeset:version
-   ```
-
-3. **Commit and push** the version bump:
-
-   ```bash
-   git add .
-   git commit -m "chore(scribo): release v0.x.x"
-   git push origin main
-   ```
-
-4. **Automated workflow** will:
-   - ✅ Build the package
-   - ✅ Publish to npm with provenance
-   - ✅ Create Git tag `@eventuras/scribo@x.x.x`
-   - ✅ Create GitHub Release with changelog
-
-### Manual Release
-
-If the automated workflow fails or you need to publish manually:
-
-```bash
-cd libs/scribo
-pnpm build
-npm login --scope @eventuras --auth-type web
-npm publish --access public
-```
-
-## Release Setup
-
-### NPM Trusted Publishing Setup (Recommended)
-
-Scribo uses **npm trusted publishing with OIDC** for secure, token-free publishing.
-
-#### Configure Trusted Publisher on npmjs.com
-
-1. Log in to [npmjs.com](https://www.npmjs.com)
-2. Navigate to `@eventuras/scribo` package settings
-3. Find **Trusted Publisher** section
-4. Click **GitHub Actions**
-5. Configure:
-   - **Organization or user**: `losol`
-   - **Repository**: `eventuras`
-   - **Workflow filename**: `scribo-release.yml` (include `.yml` extension)
-   - **Environment name**: `scribo-npm`
-6. Click **Add trusted publisher**
-
-#### Set Up GitHub Environment
-
-The workflow uses a GitHub environment for deployment protection (optional but recommended):
-
-1. Go to your GitHub repository
-2. Navigate to **Settings** → **Environments**
-3. Click **New environment**
-4. Name: `scribo-npm`
-5. (Optional) Add protection rules:
-   - Required reviewers if you want manual approval
-   - Deployment branches: Select "Selected branches" and add `main`
-6. Click **Create environment**
-
-> **Note**: With trusted publishing, you don't need to add any secrets to this environment. The workflow uses OIDC authentication automatically.
-
-### Legacy: Token-Based Publishing (Not Recommended)
-
-If you cannot use trusted publishing, you can fall back to traditional npm tokens:
-
-1. Create a granular access token on npmjs.com with write access to `@eventuras/scribo`
-2. Add it as `NODE_AUTH_TOKEN` secret in the `scribo-npm` environment
-3. Update the workflow to include `NODE_AUTH_TOKEN` environment variable in the publish step
-
-However, trusted publishing is strongly recommended for better security.
-
-
-## Workflow Trigger
-
-The release workflow (`.github/workflows/scribo-release.yml`) triggers automatically when:
-
-- Changes are pushed to the `main` branch
-- The file `libs/scribo/package.json` is modified

package/eslint.config.js

@@ -1,4 +0,0 @@
-/** @type {import("eslint").Linter.Config} */
-module.exports = {
-  extends: ['@eventuras/eslint-config/react-library.js'],
-};

package/src/App.css

@@ -1,35 +0,0 @@
-body {
-  margin: 0;
-  background: #eee;
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-h1 {
-  text-align: center;
-  margin: 20px 0;
-}
-
-.editor-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.markdown-output {
-  white-space: pre-wrap;
-  overflow: auto;
-}
-
-@media (min-width: 768px) {
-  .editor-container {
-    flex-direction: row;
-  }
-
-  .markdown-editor,
-  .markdown-output {
-    flex: 1;
-    margin: 10px;
-    padding: 20px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-  }
-}