npm - lakelib - Versions diffs - 0.0.7 → 0.1.1 - Mend

lakelib 0.0.7 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md CHANGED Viewed

@@ -1,81 +1,14 @@
 # Lake
-Lake is a rich text editor for the web. It has a good user experience and provides easy-to-use programming interface to allow further extension.
-## Downloading Lake from CDN
-Compressed copies of Lake files are available, you can download them from jsDelivr or UNPKG.
-* jsDelivr: https://www.jsdelivr.com/package/npm/lakelib
-* UNPKG: https://unpkg.com/browse/lakelib/
-Note: `lake.min.js` is not built with CodeMirror, so if you need the code block feature, addtioanaly including `codemirror.min.js` to your page is needed. But if you do not need it, there is no need to include external CodeMirror file. To find out more, see [IIFE example](https://github.com/lakejs/lake/blob/main/examples/iife.html) and [Rollup configuration](https://github.com/lakejs/lake/blob/main/rollup.config.mjs).
-## Downloading Lake using npm
-Lake is registered as a package on npm. You can install the latest version of Lake with the following npm command.
-```bash
-npm install lakelib
-```
-## Quick start with CDN
-First, add the following lines of code in the `<head>` of an HTML page.
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lakelib@latest/dist/lake.min.css" />
-<script src="https://cdn.jsdelivr.net/npm/lakelib@latest/dist/lake.min.js"></script>
-```
+[![CI](https://github.com/lakejs/lake/actions/workflows/ci.yml/badge.svg)](https://github.com/lakejs/lake/actions)
+[![npm](https://img.shields.io/npm/v/lakelib)](https://npmjs.org/package/lakelib)
+[![size](https://badgen.net/bundlephobia/minzip/lakelib?style=flat-square)](https://bundlephobia.com/package/lakelib)
-Then, in the HTML page add the following HTML code that will serve as a placeholder for an editor instance.
+---
-```html
-<div class="lake-editor">
-  <div class="lake-toolbar-root"></div>
-  <div class="lake-root"></div>
-</div>
-```
-Finally, call the following JavaScript code to render the editor.
-```js
-const toolbar = new Lake.Toolbar({
-  root: '.lake-toolbar-root',
-});
-const editor = new Lake.Editor({
-  root: '.lake-root',
-  toolbar,
-});
-editor.render();
-```
-## Quick start with npm
-First, in the HTML page add the following HTML code that will serve as a placeholder for an editor instance.
-```html
-<div class="lake-editor">
-  <div class="lake-toolbar-root"></div>
-  <div class="lake-root"></div>
-</div>
-```
-Then, call the following JavaScript code to render the editor.
-```js
-import 'lakelib/lib/lake.css';
-import { Editor, Toolbar } from 'lakelib';
+Lake is a rich text editor for the web. It has a good user experience and provides easy-to-use programming interface to allow further extension.
-const toolbar = new Toolbar({
-  root: '.lake-toolbar-root',
-});
-const editor = new Editor({
-  root: '.lake-root',
-  toolbar,
-});
-editor.render();
-```
+[Examples](https://lakejs.org/examples/) · [Getting started](https://lakejs.org/guide/getting-started) · [Reference](https://lakejs.org/reference/)
 ## Development
@@ -86,8 +19,6 @@ To build Lake or change source code, you need to download the repository and sta
 git clone https://github.com/lakejs/lake.git
 # Install dependencies
 pnpm install
-# Build CodeMirror
-pnpm build:codemirror
 # Start a local server
 pnpm dev
 ```

package/dist/lake.css CHANGED Viewed

@@ -33,12 +33,11 @@
 }
 .lake-container {
+  box-sizing: content-box;
   font-family: var(--font-family);
   font-size: 16px;
   font-weight: normal;
   line-height: normal;
-  color: var(--text-color);
-  background-color: #fff;
   padding: 16px 24px;
 }
 .lake-container:focus {
@@ -379,8 +378,9 @@ button.lake-text-button span {
 .lake-container h4,
 .lake-container h5,
 .lake-container h6 {
-  color: #000000e0;
   font-weight: bold;
+  line-height: normal;
+  border: 0;
   margin: 0;
   padding: 0;
 }
@@ -496,6 +496,7 @@ button.lake-text-button span {
   padding-left: 24px;
 }
 .lake-container ul[type="checklist"] li::before {
+  box-sizing: content-box;
   content: '';
   position: absolute;
   top: 3px;
@@ -513,6 +514,7 @@ button.lake-text-button span {
   background-color: #fff;
 }
 .lake-container ul[type="checklist"] li::after {
+  box-sizing: content-box;
   content: '';
   position: absolute;
   top: 3px;
@@ -534,6 +536,7 @@ button.lake-text-button span {
 }
 .lake-container blockquote {
+  box-sizing: content-box;
   margin: 0;
   margin-bottom: 8px;
   padding: 8px 12px;
@@ -544,19 +547,21 @@ button.lake-text-button span {
   color: var(--text-color);
   border-radius: 8px;
 }
+.lake-container blockquote[type="info"],
+.lake-container blockquote[type="tip"] {
+  background-color: #e6f4ff;
+  border: 1px solid #91caff;
+}
 .lake-container blockquote[type="success"] {
   background-color: #f6ffed;
   border: 1px solid #b7eb8f;
 }
-.lake-container blockquote[type="info"] {
-  background-color: #e6f4ff;
-  border: 1px solid #91caff;
-}
 .lake-container blockquote[type="warning"] {
   background-color: #fffbe6;
   border: 1px solid #ffe58f;
 }
-.lake-container blockquote[type="error"] {
+.lake-container blockquote[type="error"],
+.lake-container blockquote[type="danger"] {
   background-color: #fff2f0;
   border: 1px solid #ffccc7;
 }
@@ -658,11 +663,11 @@ lake-box[name="hr"] .lake-box-focused .lake-hr {
 .lake-image {
   position: relative;
   line-height: 0;
+  box-sizing: content-box;
   border: 1px solid transparent;
   border-radius: 4px;
 }
 .lake-image .lake-image-img {
-  box-sizing: border-box;
   border: 0;
   border-radius: 4px;
   width: 100%;
@@ -881,6 +886,8 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
 }
 .lake-code-block .lake-dropdown .lake-dropdown-menu {
   top: 24px;
+  left: auto;
+  right: 0;
   overflow-y: scroll;
   scrollbar-width: thin;
   height: 200px;
@@ -898,6 +905,7 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
   top: 0;
   left: 0;
   z-index: 1;
+  box-sizing: content-box;
   border: 1px solid var(--border-color);
   border-radius: 5px;
   padding: 16px;
@@ -940,8 +948,6 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
   font-size: 14px;
   font-weight: normal;
   line-height: normal;
-  color: var(--text-color);
-  background-color: #fff;
   padding: 4px;
   display: flex;
   flex-wrap: wrap;