content-editable - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

package.json

 {
-  "name": "content-editable",
-  "version": "0.1.0",
-  "description": "Semantic \"contenteditable\" component",
-  "main": "out/index.js",
-  "module": "out/module.js",
-  "scripts": {
-    "compile": "rollup -c",
-    "commitmsg": "conventional-changelog-lint -e",
-    "lint": "eslint src --ext .html,.js",
-    "precommit": "npm run lint && pkg-ok",
-    "prepublishOnly": "npm run compile && mkdir -p docs/api && echo \"**not available yet\" > docs/api/README.md",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/LukasHechenberger/content-editable.git"
-  },
-  "keywords": [
-    "contenteditable",
-    "svelte",
-    "component"
-  ],
-  "author": "Lukas Hechenberger <[e-mail]>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/LukasHechenberger/content-editable/issues"
-  },
-  "homepage": "https://github.com/LukasHechenberger/content-editable#readme",
-  "devDependencies": {
-    "conventional-changelog-lint": "^1.1.9",
-    "eslint": "^4.1.1",
-    "eslint-config-lsage": "^0.1.0",
-    "eslint-plugin-html": "^3.0.0",
-    "husky": "^0.14.1",
-    "pkg-ok": "^1.1.0",
-    "rollup": "^0.43.0",
-    "rollup-plugin-svelte": "^2.0.2"
-  },
-  "eslintConfig": {
-    "extends": "lsage",
-    "plugins": [
-      "html"
-    ]
-  }
+    "name": "content-editable",
+    "version": "0.2.0",
+    "description": "An HTML element that makes its content editable",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "license": "ISC",
+    "bugs": {
+        "url": "https://github.com/mkay581/content-editable/issues"
+    },
+    "homepage": "https://github.com/mkay581/content-editable#readme",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/mkay581/content-editable.git"
+    },
+    "keywords": [
+        "content editable component",
+        "content editable",
+        "content editable element",
+        "editable input element",
+        "editable element",
+        "editable webcomponent",
+        "editable textfield component",
+        "inline edit component",
+        "inline edit",
+        "inline",
+        "editable",
+        "edit text field"
+    ],
+    "author": "Mark Kennedy <[e-mail]> (heyimmark.com)",
+    "engines": {
+        "node": ">=10"
+    },
+    "main": "dist/content-editable.js",
+    "types": "dist/content-editable.d.ts",
+    "scripts": {
+        "test": "karma start karma.conf.js && npm run lint",
+        "test-server": "karma start karma.conf.js --single-run=false",
+        "preversion": "npm test",
+        "minify": "uglifyjs dist/content-editable.js -o dist/content-editable.min.js",
+        "build-dist": "rm -rf dist/* && rollup -c && npm run minify",
+        "version": "npm run build-dist && banner-cli dist/*.js && git add -A dist",
+        "postversion": "git push && git push --tags",
+        "start": "rollup -c --watch",
+        "lint": "tslint src/**/*",
+        "coveralls": "cat ./coverage/lcov.info | coveralls"
+    },
+    "devDependencies": {
+        "@types/chai": "^4.1.7",
+        "@types/mocha": "^5.2.5",
+        "@types/sinon": "^7.0.3",
+        "banner-cli": "0.11.1",
+        "chai": "^4.2.0",
+        "karma": "^3.1.4",
+        "karma-chai": "^0.1.0",
+        "karma-chrome-launcher": "^2.2.0",
+        "karma-coverage": "^1.1.2",
+        "karma-mocha": "^1.3.0",
+        "karma-typescript": "^3.0.13",
+        "mocha": "^5.2.0",
+        "rollup": "^1.0.0",
+        "rollup-plugin-commonjs": "^9.2.0",
+        "rollup-plugin-node-resolve": "^4.0.0",
+        "rollup-plugin-typescript2": "^0.18.1",
+        "sinon": "^7.2.2",
+        "tslint": "^5.12.0",
+        "tslint-config-prettier": "^1.15.0",
+        "typescript": "^3.2.2",
+        "uglify-es": "^3.3.9"
+    },
+    "dependencies": {
+        "anchorme": "^1.1.2"
+    }
 }

README.md

@@ -1,70 +0,74 @@
-# content-editable
+[![Build Status](https://travis-ci.org/mkay581/content-editable.svg?branch=master)](https://travis-ci.org/mkay581/content-editable)
+[![npm version](https://badge.fury.io/js/content-editable.svg)](https://www.npmjs.com/package/content-editable)
+[![Coverage Status](https://coveralls.io/repos/github/mkay581/content-editable/badge.svg?branch=master)](https://coveralls.io/github/mkay581/content-editable?branch=master)
 
-> Semantic "contenteditable" component
+# Content Editable Component
 
-Basically, this [svelte](https://svelte.technology) component just creates a `div` element and handles it's *contenteditable* behaviour:
+A custom element that makes its contents editable by changing itself into an text field, when a user clicks on it.
 
- - wraps texts between line breaks in **paragraph elements** (`<p>`)
- - handles text/html **paste events**:
-   - Removes all styles and attributes from the pasted html so it matches the expected styles
+This library was created to support features missing in [the `contenteditable` property specification](https://html.spec.whatwg.org/multipage/interaction.html#contenteditable) and to alleviate its [inconsistent browser implementations](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content#Differences_in_markup_generation).
 
 ## Installation
 
-Run `npm install --save content-editable`.
+```bash
+npm i content-editable
+```
 
 ## Usage
 
-**Basic example**
-
 ```html
-<html>
-  <body>
-    <div class="container"></div>
-    
-    <script src="path/to/content-editable.js"></script>
-    <script>
-      const component = new contentEditable.TextView({
-        target: document.querySelector('.container'),
-        data: {
-          // class: would set a custom class for the created div
-          // style: would set custom styles for the created div
-          // editable: [true] If the created div's content should be editable
-          html: '<p>The initial text</p>',
-        }
-      });
-    </script>
-  </body>
-</html>
+<script src="node_modules/content-editable/dist/content-editable.js"></script>
+<content-editable>Change Me</content-editable>
 ```
 
-**Usage inside a [svelte](https://svelte.technology) component:**
+Then, when clicking anywhere on the element, a text field will show allowing the user to change the text.
 
-```html
-<TextView bind:html></TextView>
+## API
 
-<script>
-  import { TextView } from 'contenteditable/src/TextView.html';
-  
-  export default {
-    data() {
-      return {
-        html: '<p>The initial text</p>',
-      };
-    },
-    components: {
-      TextView
-    }
-  }
-</script>
-```
+### Attributes
 
-**Subscribe to changes:**
+| Attribute   | Type      | Default | Description                                                                                                                    |
+| ----------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `readonly`  | `Boolean` | `false` | Whether the text should be editable or not.                                                                                    |
+| `multiline` | `Boolean` | `false` | Whether pressing enter should create a newline. If this is set to `true`, pressing enter will update the value to the new one. |
 
+### Events
+
+You can listen in on when the text field contents have changed.
+
 ```javascript
-const component = /* get TextView from somewhere */
+const element = document.querySelector('content-editable');
+element.addEventListener('edit', (e) => {
+    console.log(e.target.innerHTML); // the new value
+    console.log(e.target.previousInnerHTML); // old value
+});
+```
 
-component.observe('html', html => console.log('HTML content changed to', html));
-component.observe('text', text => console.log('Plain text content changed to', text));
+| Event  | Type          | Description                                                                                                                                                                                                                                                  |
+| ------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `edit` | `CustomEvent` | Fired with a custom event when the text value has been successfully changed to a new value. The event `detail` will include both a `textContent` field that contains the updated value and a `previousTextContent` field that contains the last-known value. |
+
+Of course, all of the other [events supported by any HTMLElement](https://html.spec.whatwg.org/multipage/webappapis.html#globaleventhandlers) are still available.
+
+
+## Styling
+
+An `editing` attribute is applied to the element when the text inside of the element is in focus. So you
+can style based on this attribute. The following turns the element's background to `blue` when
+it is being edited.
+
+```css
+content-editable[editing] {
+    background-color: blue;
+}
 ```
 
-To learn more about svelte observers, [see the docs](https://svelte.technology/guide#component-observe-key-callback-options-).
+#### Formatting whitespace
+
+If you would like for line breaks or any other formatting to be respected, just apply `white-space` css property.
+
+```css
+content-editable {
+    white-space: pre;
+}
+```

rollup.config.js

@@ -1,20 +0,15 @@
-import svelte from 'rollup-plugin-svelte';
+import typescript from 'rollup-plugin-typescript2';
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
 
-const baseConfig = {
-  entry: 'src/index.js',
-  plugins: [
-    svelte(),
-  ],
+export default {
+    input: 'src/content-editable.ts',
+    output: {
+        format: 'esm',
+        file: 'dist/content-editable.js'
+    },
+    plugins: [resolve(), typescript(), commonjs()],
+    watch: {
+        include: 'src/**'
+    }
 };
-
-export default [
-  Object.assign({
-    format: 'umd',
-    moduleName: 'contentEditable',
-    dest: 'out/index.js',
-  }, baseConfig),
-  Object.assign({
-    format: 'es',
-    dest: 'out/module.js',
-  }, baseConfig),
-]

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

70390

increased by184.2%

Number of package files

16

increased by33.33%

Lines of code

768

increased by33.57%

Number of low maintenance alerts

0

decreased by-100%

Number of low quality alerts

1

decreased by-66.67%

Number of lines in readme file

74

increased by4.23%

Worsened metrics

Dependency count

1

increased byInfinity%

Dev dependency count

21

increased by162.5%

Number of downloads

17

decreased by-10.53%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedanchorme@^1.1.2

• + Addedanchorme@1.1.2(transitive)