Initial Release

Author: shgysk8zer0

CHANGELOG.md

@@ -7,76 +7,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-### Changed
-- Update node version via `.npmrc`
-- Update Node CI workflow
-- Install & use `@shgysk8zer0/eslint-config`
-- Add support for `node --test`, including ignoring tests for publishing
-- Update ESLint & super-linter
-- Switch to more basic Rollup config
-- Update `exports` and `main` accordingly
-
-### Fixed
-- Fix missed renaming in README
-
-## Removed
-- Remove old ESLint config files
-
-## [v1.1.1] - 2023-09-24
-
-### Added
-- Add `unpkg` to `package.json`
-- Add badges in README
-
-### Changed
-- Update `exports` to `package.json` to handle wider variety
-
-### Fixed
-- Fix typo in `fix:js` script
-
-### [v1.1.0] - 2023-07-03
-
-### Changed
-- Update to node 20
-- Update npm publishing GH Action
-
-## [v1.0.5] - 2023-07-02
-
-### Added
-- Add `funding`
-
-### Changed
-- Updated GitHub Actions workflows 
-- Update versioning & lock-file scripts
-- Update `.npmignore` & `.gitignore`
-
-## [v1.0.4] - 2023-06-08
-
-### Added
-- Install `@shgysk8zer0/npm-utils`
-- Add `exports` to package config
-
-### Removed
-- Uninstall `rollup`, `eslint`
-
-### Changed
-- Use `getConfig()` from `@shgysk8zer0/js-utils/rollup` for rollup config
-
-## [v1.0.3] - 2023-06-01
-
-### Fixed
-- Revert to old Release Action, now with permissions & link to changelog
-
-## [v1.0.2] - 2023-06-01
-
-### Fixed
-- Fix `changelog-entry` to match `[$version]` instead of `$version`
-
-## [v1.0.1] - 2023-05-31
-
-### Fixed
-- Update GitHub Release workflow to use [Auto Release](https://github.com/marketplace/actions/auto-release)
-
-## [v1.0.0] - 2023-05-31
+## [v1.0.0] - 2025-04-30
 
 Initial Release

README.md

@@ -1,24 +1,24 @@
-# npm-template
+# `@aegisjsproject/md-editor`
 
-A template repo for npm packages
+A custom Markdown editor component with preview as a form input element
 
-[![CodeQL](https://github.com/shgysk8zer0/npm-template/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/shgysk8zer0/npm-template/actions/workflows/codeql-analysis.yml)
-![Node CI](https://github.com/shgysk8zer0/npm-template/workflows/Node%20CI/badge.svg)
-![Lint Code Base](https://github.com/shgysk8zer0/npm-template/workflows/Lint%20Code%20Base/badge.svg)
+[![CodeQL](https://github.com/AegisJSProject/md-editor/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/AegisJSProject/md-editor/actions/workflows/codeql-analysis.yml)
+![Node CI](https://github.com/AegisJSProject/md-editor/workflows/Node%20CI/badge.svg)
+![Lint Code Base](https://github.com/AegisJSProject/md-editor/workflows/Lint%20Code%20Base/badge.svg)
 
-[![GitHub license](https://img.shields.io/github/license/shgysk8zer0/npm-template.svg)](https://github.com/shgysk8zer0/npm-template/blob/master/LICENSE)
-[![GitHub last commit](https://img.shields.io/github/last-commit/shgysk8zer0/npm-template.svg)](https://github.com/shgysk8zer0/npm-template/commits/master)
-[![GitHub release](https://img.shields.io/github/release/shgysk8zer0/npm-template?logo=github)](https://github.com/shgysk8zer0/npm-template/releases)
+[![GitHub license](https://img.shields.io/github/license/AegisJSProject/md-editor.svg)](https://github.com/AegisJSProject/md-editor/blob/master/LICENSE)
+[![GitHub last commit](https://img.shields.io/github/last-commit/AegisJSProject/md-editor.svg)](https://github.com/AegisJSProject/md-editor/commits/master)
+[![GitHub release](https://img.shields.io/github/release/AegisJSProject/md-editor?logo=github)](https://github.com/AegisJSProject/md-editor/releases)
 [![GitHub Sponsors](https://img.shields.io/github/sponsors/shgysk8zer0?logo=github)](https://github.com/sponsors/shgysk8zer0)
 
-[![npm](https://img.shields.io/npm/v/@shgysk8zer0/npm-template)](https://www.npmjs.com/package/@shgysk8zer0/npm-template)
-![node-current](https://img.shields.io/node/v/@shgysk8zer0/npm-template)
-![npm bundle size gzipped](https://img.shields.io/bundlephobia/minzip/@shgysk8zer0/npm-template)
-[![npm](https://img.shields.io/npm/dw/@shgysk8zer0/npm-template?logo=npm)](https://www.npmjs.com/package/@shgysk8zer0/npm-template)
+[![npm](https://img.shields.io/npm/v/@aegisjsproject/md-editor)](https://www.npmjs.com/package/@aegisjsproject/md-editor)
+![node-current](https://img.shields.io/node/v/@aegisjsproject/md-editor)
+![npm bundle size gzipped](https://img.shields.io/bundlephobia/minzip/@aegisjsproject/md-editor)
+[![npm](https://img.shields.io/npm/dw/@aegisjsproject/md-editor?logo=npm)](https://www.npmjs.com/package/@aegisjsproject/md-editor)
 
-[![GitHub followers](https://img.shields.io/github/followers/shgysk8zer0.svg?style=social)](https://github.com/shgysk8zer0)
-![GitHub forks](https://img.shields.io/github/forks/shgysk8zer0/npm-template.svg?style=social)
-![GitHub stars](https://img.shields.io/github/stars/shgysk8zer0/npm-template.svg?style=social)
+[![GitHub followers](https://img.shields.io/github/followers/AegisJSProject.svg?style=social)](https://github.com/AegisJSProject)
+![GitHub forks](https://img.shields.io/github/forks/AegisJSProject/md-editor.svg?style=social)
+![GitHub stars](https://img.shields.io/github/stars/AegisJSProject/md-editor.svg?style=social)
 [![Twitter Follow](https://img.shields.io/twitter/follow/shgysk8zer0.svg?style=social)](https://twitter.com/shgysk8zer0)
 
 [![Donate using Liberapay](https://img.shields.io/liberapay/receives/shgysk8zer0.svg?logo=liberapay)](https://liberapay.com/shgysk8zer0/donate "Donate using Liberapay")
@@ -27,3 +27,86 @@ A template repo for npm packages
 - [Code of Conduct](./.github/CODE_OF_CONDUCT.md)
 - [Contributing](./.github/CONTRIBUTING.md)
 <!-- - [Security Policy](./.github/SECURITY.md) -->
+## Installation
+
+### Node Instructions
+```bash
+npm i @aegisjsproject/md-editor
+```
+
+### Using [`<script type="importmap">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap) and a CDN
+
+```html
+<script type="importmap">
+  {
+    "imports": {
+      "@aegisjsproject/md-editor": "https://unpkg.com/@aegisjsproject/md-editor@1.0.0/md-editor.min.js"
+    }
+  }
+</script>
+```
+
+### Just Using a `<script>`
+
+```html
+<script src="https://unpkg.com/@aegisjsproject/md-editor@1.0.0/md-editor.min.js" crossorigin="anonymous" referrerpolicy="no-referrer" defer=""></script>
+```
+
+## Example Usage
+
+### Just using HTML
+
+```html
+<form id="post">
+  <label for="content">Content</label>
+  <!-- This behaves basically like a textarea or any input -->
+  <md-editor name="content" id="content" minlength="40" mode="editor" required="">
+    # Hello, World!
+    ![foo](/img/foo.png)
+  </md-editor>
+  <!-- Rest of form stuff -->
+</form>
+```
+
+### Creating through Scripting
+
+```js
+// Need to import if not already added
+import '@aegisjsproject/md-editor';
+
+// Get the component class
+const HTMLMarkdownEditorElement = customElements.get('md-editor');
+
+// Create and setup the element
+const editor = new HTMLMarkdownEditorElement();
+editor.name = 'content';
+editor.id = 'content';
+
+// Optionally bind to `history.state[whatever]
+editor.textContent = history.state?.content;
+editor.addEventListener('change', ({ target }) => history.replaceState({ content: target.value }, '', location.href), { passive: true });
+
+// Add to the form, after its `<label>`
+document.querySelector(`label[for="${editor.id}"]`).after(editor);
+```
+
+## Usage Notes and Browser APIs
+
+This component utilizes some proposed and experimental APIs including `Element.prototype.setHTML` (this [Sanitizer API](https://github.com/WICG/sanitizer-api))
+and [`String.dedent`](https://github.com/tc39/proposal-string-dedent). These APIs **MUST** be polyfilled. You may find
+the required polyfills in [`@shgysk8zer0/polyfills`](https://npmjs.com/package/@shgysk8zer0/polyfills) or provide your own.
+
+## Security
+
+Like all `@aegisjsproject` libraries, this component is indended to be safe and compatible in highly secure contexts. It
+is designed to work with a very restricted [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy)
+as well as [the Trusted Types API](https://developer.mozilla.org/en-US/docs/Web/API/Trusted_Types_API).
+
+### Example CSP
+
+Note the [SRI](https://developer.mozilla.org/en-US/docs/Web/Security/Practical_implementation_guides/SRI) Integrity used
+for a `<script type="importmap">` and the Trusted Types Policy of `aegis-sanitizer#html` (required for the Sanitizer API polyfill).
+
+```
+Content-Security-Policy: default-src 'self'; script-src 'self' https://unpkg.com/@shgysk8zer0/ https://unpkg.com/@aegisjsproject/ 'sha384-XYouuKGvd2BSrapxPZFWENl9b0loR7EVyC2cls6tQ/Oa+3R/uWw6TQ+nWa4/zt9l'; style-src 'self' https://unpkg.com/@highlightjs/ https://unpkg.com/@aegisjsproject/; img-src 'self'; trusted-types aegis-sanitizer#html; require-trusted-types-for 'script';
+```

consts.js

@@ -1,3 +1,3 @@
-import { node } from '@shgysk8zer0/eslint-config';
+import { browser } from '@shgysk8zer0/eslint-config';
 
-export default node({ files: ['**/*.js'], ignores: ['**/*.min.js', '**/*.cjs', '**/*.mjs'] });
+export default browser({ files: ['**/*.js'], ignores: ['**/*.min.js', '**/*.cjs', '**/*.mjs'] });

eslint.config.js

@@ -0,0 +1,90 @@
+import { importmap, getImportmapScript, getImportmapIntegrity } from '@shgysk8zer0/importmap';
+
+const integrity = await getImportmapIntegrity();
+const csp = [
+	'default-src \'self\'',
+	`script-src 'self' https://unpkg.com/@shgysk8zer0/ https://unpkg.com/@aegisjsproject/ '${integrity}'`,
+	'style-src \'self\' https://unpkg.com/@highlightjs/ https://unpkg.com/@aegisjsproject/',
+	'img-src \'self\' https://cdn.kernvalley.us/img/',
+	'trusted-types aegis-sanitizer#html',
+	'require-trusted-types-for \'script\'',
+].join('; ');
+
+console.log(csp);
+
+const style = sheet => `<link rel="stylesheet" href="${importmap.imports['@aegisjsproject/styles/']}css/${sheet}.css" crossorigin="anonymous" referrerpolicy="no-referrer" />`;
+
+const script = `
+import './md-editor.js';
+
+const HTMLMarkdownEditorElement = customElements.get('md-editor');
+const editor = new HTMLMarkdownEditorElement();
+editor.name = 'content';
+editor.id = 'content';
+editor.textContent = history.state?.content;
+editor.addEventListener('change', ({ target }) => history.replaceState({ content: target.value }, '', location.href), { passive: true });
+document.querySelector('label[for="content"]').after(editor);
+document.forms.post.addEventListener('submit', event => {
+	event.preventDefault();
+	const data = new FormData(event.target);
+	document.getElementById('result').textContent = JSON.stringify(Object.fromEntries(data), null, 4);
+	document.getElementById('popover').showPopover();
+});
+`;
+
+const doc = `<!DOCTYPE html>
+<html lang="en" dir="ltr">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="color-scheme" content="light dark" />
+		<title>@aegisjsproject/md-editor</title>
+		${style('properties')}
+		${style('reset')}
+		${style('theme')}
+		${style('button')}
+		${style('misc')}
+		${style('forms')}
+		${style('scrollbar')}
+		${style('animations')}
+		${await getImportmapScript()}
+		<script defer="" referrerpolicy="no-referrer" fetchpriority="high" crossorigin="anonymous" integrity="sha384-X8d55dt38lBIY87GNkg6Upb9pjtwYlhEoKtw9Sfsbj/XCDV4W+g0kdx4X1Bo/EaO" src="https://unpkg.com/@shgysk8zer0/polyfills@0.4.11/browser.min.js"></script>
+		<script src="./index.js" type="module" referrerpolicy="no-referrer"></script>
+	</head>
+	<body>
+		<form id="post">
+			<fieldset class="no-border">
+				<legend>Create a Post</legend>
+				<div class="form-group">
+					<label for="title" class="input-label required">Title</label>
+					<input type="text" name="title" id="title" class="input" placeholder="Post Title" required />
+				</div>
+				<div class="form-group">
+					<label for="content" class="input-label required">Content</label>
+					<!-- MD Editor here -->
+				</div>
+			</fieldset>
+			<div>
+				<button type="submit" class="btn btn-success">Submit</button>
+				<button type="reset" class="btn btn-danger">Reset</button>
+			</div>
+		</form>
+		<div id="popover" popover="auto">
+			<pre><code id="result"></code></pre>
+		</div>
+	</body>
+</html>`;
+
+const headers = new Headers({
+	'Content-Type': 'text/html',
+	'Content-Security-Policy': csp,
+});
+
+export default {
+	routes: {
+		'/': () => new Response(doc, { headers }),
+		'/index.js': () => new Response(script, { headers: { 'Content-Type': 'application/javascript' }}),
+	},
+	port: 8123,
+	open: true,
+};