react-headless-mde 0.0.8 → 1.0.1

package/.eslintrc.js

@@ -0,0 +1,24 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json'], // Specify it only for TypeScript files
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ['plugin:react/recommended', 'standard-with-typescript', 'plugin:prettier/recommended'],
+  overrides: [],
+  plugins: ['react', 'import', 'simple-import-sort'],
+  rules: {
+    '@typescript-eslint/strict-boolean-expressions': 0,
+    '@typescript-eslint/explicit-function-return-type': 0,
+  },
+};

package/.github/workflows/npm-publish-next.yml

@@ -0,0 +1,23 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/ru/actions/quickstart
+
+name: Publish with @next
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build-and-publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm install
+      - run: npm run build
+      - run: npm publish --tag next
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/npm-publish.yml

@@ -1,11 +1,14 @@
 # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+# For more information see: https://docs.github.com/ru/actions/quickstart
 
-name: Publish to NPM
+name: Publish
 
 on:
-  release:
-    types: [created]
+  push:
+    branches:
+      - 'main'
+#  release:
+#    types: [created]
 
 jobs:
   build-and-publish:
@@ -14,11 +17,10 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           registry-url: 'https://registry.npmjs.org'
-      - run: yarn install
-      - run: yarn build
+      - run: npm install
+      - run: npm run build
       - run: npm publish
-#      - run: npm publish --tag next
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+node_modules/.bin/lint-staged

package/.husky/pre-push

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run check-types

package/README.md

@@ -0,0 +1,83 @@
+# Introduction
+
+A simple yet powerful and extensible **React Markdown Editor** that aims to have feature parity with the Github Markdown editor.
+React-mde-headless has no 3rd party dependencies.
+
+## [Demo](https://codesandbox.io/s/competent-jepsen-qyz51q?file=/src/index.tsx)
+
+## Installing
+
+    npm i react-headless-mde
+
+## Using
+
+```jsx
+import { bold, italic, link, useTextAreaMarkdownEditor } from 'react-mde-headless';
+
+export const MarkdownEditor = () => {
+  const { ref } = useTextAreaMarkdownEditor();
+
+  return (
+    <div className={'mb-4'}>
+      <div className={'mb-3 gap-1 flex flex-wrap'}>
+        <button onClick={bold}>B</button>
+      </div>
+
+      <textarea ref={ref} />
+    </div>
+  );
+};
+```
+
+## Supported commands
+
+- bold
+- italic
+- strikethrough
+- headingLevel1
+- headingLevel2
+- headingLevel3
+- headingLevel4
+- headingLevel5
+- headingLevel6
+- link
+- quote
+- code
+- codeBlock
+- checkedList
+- orderedList
+- unorderedList
+- image
+- attachment
+
+## Todo
+
+- Check execution on SSR (For example, Next.js) and, if necessary, regenerate eslint config, taking into account execution on node.js
+- Add to awesome-react-headless-components on stable version https://github.com/jxom/awesome-react-headless-components
+- peerDependencies React?
+- heading undo
+
+### Third party
+
+- https://github.com/grassator/insert-text-at-cursor by https://twitter.com/d_kubyshkin
+
+### XSS concerns
+
+React-mde-headless does not automatically sanitize the HTML preview. If your using Showdown,
+this has been taken from [their documentation](<https://github.com/showdownjs/showdown/wiki/Markdown's-XSS-Vulnerability-(and-how-to-mitigate-it)>):
+
+> Cross-side scripting is a well known technique to gain access to private information of the users
+> of a website. The attacker injects spurious HTML content (a script) on the web page which will read
+> the user’s cookies and do something bad with it (like steal credentials). As a countermeasure,
+> you should filter any suspicious content coming from user input. Showdown doesn’t include an
+> XSS filter, so you must provide your own. But be careful in how you do it…
+
+You might want to take a look at [showdown-xss-filter](https://github.com/VisionistInc/showdown-xss-filter).
+
+## Licence
+
+React-mde-headless is [MIT licensed](https://github.com/andrerpena/react-mde/blob/master/LICENSE).
+
+## About the authors
+
+Created by [André Pena](https://github.com/andrerpena). Maintained and developed by https://github.com/webbrother.