wx-svelte-comments 2.0.1

package/license.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 XB Software Sp. z o.o.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,54 @@
+{
+	"name": "wx-svelte-comments",
+	"version": "2.0.1",
+	"description": "Simple Svelte component for adding a comments section on a page",
+	"productTag": "comments",
+	"productTrial": false,
+	"type": "module",
+	"scripts": {
+		"build": "vite build",
+		"build:dist": "vite build --mode dist",
+		"build:tests": "vite build --mode test",
+		"lint": "yarn eslint ./demos ./src",
+		"start": "vite --open",
+		"start:tests": "vite --open=/tests/ --host 0.0.0.0  --port 5100 --mode test",
+		"test": "true",
+		"test:cypress": "cypress run -P ./ --config \"baseUrl=http://localhost:5100/tests\""
+	},
+	"svelte": "src/index.js",
+	"exports": {
+		".": {
+			"svelte": "./src/index.js"
+		},
+		"./package.json": "./package.json"
+	},
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/svar-widgets/comments.git"
+	},
+	"bugs": {
+		"url": "https://forum.svar.dev"
+	},
+	"homepage": "https://svar.dev/svelte/comments/",
+	"dependencies": {
+		"wx-comments-locales": "2.0.1",
+		"wx-lib-data-provider": "1.6.0",
+		"wx-lib-dom": "0.7.1",
+		"wx-lib-state": "1.9.0",
+		"wx-svelte-core": "2.0.1",
+		"wx-svelte-menu": "2.0.1"
+	},
+	"files": [
+		"src",
+		"readme.md",
+		"whatsnew.md",
+		"license.txt"
+	],
+	"keywords": [
+		"svelte",
+		"comments",
+		"ui component",
+		"comments section"
+	]
+}

package/readme.md

@@ -0,0 +1,51 @@
+<div align="center">
+
+# SVAR Svelte Comments
+
+[![npm](https://img.shields.io/npm/v/wx-svelte-comments.svg)](https://www.npmjs.com/package/wx-svelte-comments)
+[![License](https://img.shields.io/github/license/svar-widgets/comments)](https://github.com/svar-widgets/comments/blob/main/license.txt)
+[![npm downloads](https://img.shields.io/npm/dm/wx-svelte-comments.svg)](https://www.npmjs.com/package/wx-svelte-comments)
+
+</div>
+
+<div align="center">
+
+[Documentation](https://docs.svar.dev/svelte/core/comments/) • [Demos](https://docs.svar.dev/svelte/core/samples-comments/#/base/willow)
+
+</div>
+
+A Svelte UI component for creating a comments section. Supports adding, editing, and deleting comments with ease.
+
+### How to Use
+
+To use the widget, simply import the package and include the component in your Svelte file:
+
+```svelte
+<script>
+	import { Comments } from "wx-svelte-comments";
+
+	const value = [];
+</script>
+
+<Comments {value} />
+```
+
+### How to Modify
+
+Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:
+
+1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work
+2. Start the project in development mode with `yarn start`
+
+### Run Tests
+
+To run the test:
+
+1. Start the test examples with:
+    ```sh
+    yarn start:tests
+    ```
+2. In a separate console, run the end-to-end tests with:
+    ```sh
+    yarn test:cypress
+    ```

package/src/components/Comments.svelte

@@ -0,0 +1,21 @@
+<script>
+	import Layout from "./Layout.svelte";
+	import { Locale } from "wx-svelte-core";
+	import { en } from "wx-comments-locales";
+
+	const { ondata, onchange, value, ...props } = $props();
+	const finalData = $derived(ondata && value ? ondata(value) : value);
+
+	const handleOnchange = e => {
+		e.originalValue = value;
+		return onchange && onchange(e);
+	};
+</script>
+
+<Locale words={en} optional={true}>
+	{#await finalData}
+		<Layout data={[]} {...props} onchange={handleOnchange} />
+	{:then data}
+		<Layout {data} {...props} onchange={handleOnchange} />
+	{/await}
+</Locale>

package/src/components/Layout.svelte

@@ -0,0 +1,212 @@
+<script>
+	import { getContext, setContext } from "svelte";
+	import Messages from "./Messages.svelte";
+	import TextArea from "./TextArea.svelte";
+	import { ActionMenu } from "wx-svelte-menu";
+	import { uid } from "wx-lib-state";
+	import { dateToString } from "wx-lib-dom";
+
+	let {
+		onaction,
+		onchange,
+		readonly = false,
+		render = "flow",
+		format = "text",
+		users: rawUsers,
+		data: rawData,
+		activeUser,
+		focus = false,
+	} = $props();
+
+	let edit = $state(null);
+	const lang = getContext("wx-i18n");
+	const { calendar, comments, formats } = lang.getRaw();
+	const _ = lang.getGroup("comments");
+
+	const dateFormatter = dateToString(
+		comments.dateFormat || formats.dateFormat,
+		calendar
+	);
+	setContext("wx-comments-format", {
+		dateStr: date => dateFormatter(date),
+	});
+
+	const unknownUser = { id: 0, name: _("Unknown"), color: "hsl(0, 0%, 85%)" };
+
+	const users = $derived.by(() => {
+		if (!rawUsers) return [];
+		return rawUsers.map(u => {
+			if (!u.color) 
+				return { ...u, color: "hsl(" + getColor(u.id + u.name) + ", 100%, 85%)" };
+			return u;
+		});
+	});
+
+	const author = $derived.by(() => {
+		if (typeof activeUser === "object") return activeUser;
+		const a = users.find(u => u.id === activeUser) || unknownUser;
+		if (a) return a;
+		return { id: activeUser || -1, name: _("Me"), color: "hsl(225, 76%, 67%)" };
+	});
+
+	const data = $derived.by(() => {
+		if (!rawData) return [];
+
+		// data with user objects
+		return rawData.map(d => {
+			if (typeof d.author === "object") return d;
+
+			const user = users ? users.find(u => u.id === d.user) : null;
+			return {
+				...d,
+				author: user || unknownUser,
+			};
+		});
+	});
+
+	function getColor(name) {
+		let hash = 0;
+		for (let i = 0; i < name.length; i++) {
+			// eslint-disable-next-line no-bitwise
+			hash = name.charCodeAt(i) + ((hash << 5) - hash);
+		}
+		return (hash % 60) * 6;
+	}
+
+	function add(content) {
+		const comment = {
+			id: uid(),
+			content,
+			author,
+			user: author.id,
+			date: new Date(),
+		};
+
+		rawData = [...data, comment];
+		if (onchange){
+			const res = onchange({ value:rawData, comment, action: "add" });
+			if (res && typeof res === "object"){
+				if (res.then){
+					res.then((data) => {
+						updateAfter(comment.id, data);
+					});
+				} else {
+					updateAfter(comment.id, res);
+				}
+			}
+		}
+	}
+
+	function updateAfter(id, data){
+		const index = rawData.findIndex(d => d.id === id);
+
+		const copy = [ ...rawData ];
+		copy[index] = { ...rawData[index], ...data };
+		rawData = copy;
+	}
+
+	function remove(id) {
+		if (edit === id) edit = null;
+
+		rawData = rawData.filter(d => d.id !== id);
+		onchange && onchange({ value: rawData, id, action: "delete" });
+	}
+
+	function update(id, content) {
+		let comment;
+		rawData = rawData.map(d => {
+			if (d.id === id) {
+				comment = { ...d, content };
+				return comment;
+			} else return d;
+		});
+		edit = null;
+
+		onchange && onchange({ value: rawData, id, action: "update", comment });
+	}
+
+	function cancelUpdate() {
+		edit = null;
+	}
+
+	function handleActionMenu(ev) {
+		const { context, action } = ev;
+
+		if (!action) return;
+
+		onaction && onaction({ action: "menu-clicked" });
+
+		switch (action.id) {
+			case "edit-comment":
+				edit = context;
+				break;
+			case "delete-comment":
+				remove(context);
+				break;
+		}
+	}
+
+	const menuItems = [
+		{
+			id: "edit-comment",
+			text: _("Edit"),
+			icon: "wxi-edit-outline",
+		},
+		{
+			id: "delete-comment",
+			text: _("Delete"),
+			icon: "wxi-delete-outline",
+		},
+	];
+
+	let menu = $state(null);
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="wx-comments-list">
+	<ActionMenu
+		at={"bottom"}
+		bind:this={menu}
+		options={menuItems}
+		resolver={item => item}
+		dataKey="commentMenuId"
+		onclick={handleActionMenu}
+	/>
+	<div class="wx-list" onclick={menu.show}>
+		<Messages
+			{author}
+			{render}
+			{data}
+			{format}
+			{edit}
+			onpost={ev => update(edit, ev.value)}
+			oncancel={cancelUpdate}
+		></Messages>
+	</div>
+	{#if !readonly && !edit}
+		<TextArea
+			{author}
+			flow={render === "flow"}
+			{focus}
+			onpost={ev => add(ev.value)}
+			buttonLabel={_("Add")}
+		/>
+	{/if}
+</div>
+
+<style>
+	.wx-comments-list {
+		height: 100%;
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+	.wx-list {
+		display: flex;
+		flex-direction: column;
+		margin-bottom: 4px;
+		overflow-y: auto;
+		flex: 1;
+	}
+</style>

package/src/components/Messages/Bubbles.svelte

@@ -0,0 +1,135 @@
+<script>
+	import { getContext } from "svelte";
+	import UserIcon from "./UserIcon.svelte";
+
+	const {
+		owned,
+		author,
+		date,
+		edit,
+		children,
+	} = $props();
+
+	const dateFormatter = getContext("wx-comments-format").dateStr;
+</script>
+
+<div class="wx-bubble" class:wx-owned={owned}>
+	<div class="wx-bubble-wrapper">
+		<div class="wx-avatar">
+			<UserIcon data={author} />
+		</div>
+		<div class="wx-main-bubble">
+			<span class="wx-author-name">{author.name}</span>
+			{#if owned}
+				<div class="wx-agent-message">
+					<div class="wx-message">
+						{@render children()}
+						{#if edit !== owned}<div class="wx-comment-date">
+								{dateFormatter(date)}
+							</div>{/if}
+					</div>
+					<div class="wx-menu-icon" data-comment-menu-id={owned}>
+						<i class="wx-icon wxi-dots-v"></i>
+					</div>
+				</div>
+			{:else}
+				<div class="wx-message">
+					{@render children()}
+					<div class="wx-comment-date">{dateFormatter(date)}</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	.wx-bubble {
+		width: 100%;
+		display: flex;
+		justify-content: end;
+	}
+	.wx-bubble.wx-owned {
+		justify-content: start;
+	}
+	.wx-bubble-wrapper {
+		width: 65%;
+		display: flex;
+		justify-content: end;
+		gap: 8px;
+	}
+	.wx-owned .wx-bubble-wrapper {
+		width: calc(65% + 28px);
+		justify-content: start;
+	}
+	.wx-author-name {
+		margin-left: auto;
+	}
+	.wx-owned .wx-author-name {
+		margin-left: 0;
+	}
+	.wx-message {
+		background-color: var(--wx-comments-msg-background);
+		padding: 8px 12px;
+		white-space: pre-wrap;
+		line-height: 24px;
+		border-radius: 6px 0 6px 6px;
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+	.wx-owned .wx-message {
+		background-color: var(--wx-comments-msg-background-agent);
+		border-radius: 0 6px 6px 6px;
+		width: 100%;
+	}
+	.wx-author-name {
+		font-weight: 600;
+		font-size: 14px;
+		line-height: 24px;
+	}
+	.wx-agent-message {
+		display: flex;
+		align-items: flex-end;
+		gap: 4px;
+		cursor: pointer;
+	}
+	.wx-menu-icon {
+		opacity: 0;
+		height: 24px;
+		color: #9fa1ae;
+		cursor: pointer;
+		height: 100%;
+	}
+	.wx-menu-icon i {
+		font-size: 24px;
+		line-height: 24px;
+	}
+	.wx-menu-icon:hover {
+		color: var(--wx-color-primary);
+	}
+	.wx-agent-message:hover .wx-menu-icon {
+		opacity: 1;
+		transition: all 0.2s linear;
+	}
+	.wx-main-bubble {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		width: 100%;
+	}
+	.wx-avatar {
+		height: 32px;
+		width: 32px;
+	}
+
+	.wx-bubble:not(.wx-owned) .wx-bubble-wrapper {
+		flex-direction: row-reverse;
+	}
+
+	.wx-comment-date {
+		font-size: var(--wx-font-size-sm);
+		color: var(--wx-color-font-alt);
+		display: flex;
+		flex-direction: row-reverse;
+	}
+</style>

package/src/components/Messages/Common.svelte

@@ -0,0 +1,27 @@
+<script>
+	import TextArea from "../TextArea.svelte";
+	import { messages, formats } from "./index.js";
+
+	const {
+		text,
+		date,
+		owned,
+		render,
+		format = "text",
+		author,
+		edit,
+		onpost,
+		oncancel
+	} = $props();
+
+	const BoxRender = typeof render === "string" ? messages[render] : render;
+	const TextRender = typeof format === "string" ? formats[format] : format;
+</script>
+
+<BoxRender {owned} {edit} {author} {date}>
+	{#if edit && edit === owned}
+		<TextArea focus={true} {onpost} {oncancel} value={text} />
+	{:else}
+		<TextRender {text} {edit} />
+	{/if}
+</BoxRender>

package/src/components/Messages/Flow.svelte

@@ -0,0 +1,79 @@
+<script>
+	import { getContext } from "svelte";
+	import UserIcon from "./UserIcon.svelte";
+
+	const {
+		owned,
+		author,
+		date,
+		edit,
+		children,
+	} = $props();
+
+	const dateFormatter = getContext("wx-comments-format").dateStr;
+</script>
+
+<div class="wx-flow" class:owned>
+	<div class="wx-flow-toolbar">
+		<UserIcon data={author} />
+		<span class="wx-author-name">{author.name}</span>
+		{#if owned && owned !== edit}
+			<div class="wx-menu-icon" data-comment-menu-id={owned}>
+				<i class="wx-icon wxi-dots-v" ></i>
+			</div>
+		{/if}
+	</div>
+	<div class="wx-comment-date">{dateFormatter(date)}</div>
+	<div class="wx-message">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	.wx-flow {
+		width: 100%;
+		padding: 16px 20px;
+		border-radius: 6px;
+	}
+	.wx-flow.owned {
+		background-color: var(--wx-comments-msg-background-agent);
+	}
+	.wx-flow:hover .wx-menu-icon {
+		opacity: 1;
+		transition: all 0.2s linear;
+	}
+	.wx-flow-toolbar {
+		width: 100%;
+		display: flex;
+		gap: 8px;
+	}
+	.wx-message {
+		margin-left: 32px;
+		line-height: 24px;
+		white-space: pre-wrap;
+	}
+	.wx-author-name {
+		font-weight: 600;
+		font-size: 14px;
+		line-height: 24px;
+	}
+	.wx-menu-icon {
+		color: #9fa1ae;
+		cursor: pointer;
+		margin-left: auto;
+		opacity: 0;
+		height: 24px;
+	}
+	.wx-menu-icon:hover {
+		color: var(--wx-color-primary);
+	}
+	.wx-menu-icon i {
+		font-size: 24px;
+		line-height: 24px;
+	}
+	.wx-comment-date {
+		margin-left: 32px;
+		font-size: var(--wx-font-size-sm);
+		color: var(--wx-color-font-alt);
+	}
+</style>

package/src/components/Messages/MarkdownPlain.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { html } from "../../libs/lima.es.js";
+	export let text;
+</script>
+
+<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+{@html html(text)}

package/src/components/Messages/TextPlain.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let text;
+</script>
+
+{text}

package/src/components/Messages/UserIcon.svelte

@@ -0,0 +1,77 @@
+<script>
+	import { getContrastingColor } from "../../helpers/colors";
+
+	const {
+		data = {
+			name: "",
+			avatar: "",
+			color: "",
+		},
+		noTransform = false,
+		size = "small",
+		border = true,
+	} = $props();
+
+	const firstLetters = $derived(data.name
+		.split(" ")
+		.map(name => name[0])
+		.join(""));
+
+	let style = $derived(data.color ? `background: ${data.color};` : "");
+	let css = $derived(data.color ? `wx-comments-avatar-color-${getContrastingColor(data.color)}` : "");
+</script>
+
+<div class="wx-user wx-{size} {css}" class:wx-border={border} {style}>
+	{#if data.avatar}
+		<img src={data.avatar} alt={data.name} />
+	{:else if noTransform}{data.name}{:else}{firstLetters}{/if}
+</div>
+
+<style>
+	.wx-user {
+		--wx-comments-user-icon-size: 36px;
+
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 12px;
+		border-radius: 50%;
+		color: var(--wx-color-font);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		overflow: hidden;
+		background-color: #ca9cec;
+		color: var(--wx-color-font);
+	}
+
+	.wx-user.wx-normal {
+		width: var(--wx-comments-user-icon-size);
+		height: var(--wx-comments-user-icon-size);
+		font-size: var(--wx-font-size);
+	}
+
+	.wx-user.wx-small {
+		width: 24px;
+		height: 24px;
+		font-size: var(--wx-font-size-sm);
+	}
+
+	.wx-user img {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.wx-user:not(:first-child) {
+		margin-left: -15px;
+	}
+
+	.wx-user.wx-comments-avatar-color-light {
+		color: var(--wx-color-primary-font);
+	}
+
+	.wx-user.wx-comments-avatar-color-dark {
+		color: var(--wx-avatar-color-dark);
+	}
+</style>

package/src/components/Messages/index.js

@@ -0,0 +1,14 @@
+import Bubbles from "./Bubbles.svelte";
+import Flow from "./Flow.svelte";
+
+import MarkdownPlain from "./MarkdownPlain.svelte";
+import TextPlain from "./TextPlain.svelte";
+
+export const messages = {
+	bubbles: Bubbles,
+	flow: Flow,
+};
+export const formats = {
+	markdown: MarkdownPlain,
+	text: TextPlain,
+};

package/src/components/Messages.svelte

@@ -0,0 +1,51 @@
+<script>
+	import Message from "./Messages/Common.svelte";
+
+	const {
+		data,
+		render = "blocks",
+		format,
+		author,
+		edit,
+		onpost,
+		oncancel,
+	} = $props();
+
+	const css = $derived(typeof render === "string" ? render : "blocks");
+</script>
+
+<div class="wx-messages wx-{css}">
+	{#each data as message (message.id)}
+		<Message
+			text={message.content}
+			date={message.date}
+			author={message.author}
+			owned={message.author.id === author.id ? message.id : null}
+			{render}
+			{edit}
+			format={message.format || format}
+			{onpost}
+			{oncancel}
+		/>
+	{/each}
+</div>
+
+<style>
+	.wx-messages {
+		padding: 10px 0;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.wx-messages.wx-bubbles {
+		gap: 24px;
+	}
+
+	.wx-messages.wx-cards {
+		gap: 16px;
+	}
+
+	.wx-messages.wx-blocks {
+		gap: 24px;
+	}
+</style>

package/src/components/TextArea.svelte

@@ -0,0 +1,81 @@
+<script>
+	import { onMount, getContext } from "svelte";
+	import { TextArea, Button } from "wx-svelte-core";
+	import UserIcon from "./Messages/UserIcon.svelte";
+
+	let {
+		focus = false,
+		buttonLabel = "Send",
+		flow = false,
+		value = $bindable(""),
+		author,
+		onpost,
+	} = $props();
+
+	let textarea, area;
+
+	const _ = getContext("wx-i18n").getGroup("comments");
+
+	onMount(() => {
+		area = textarea.querySelector("textarea");
+		if (focus) area.focus();
+		area.onkeydown = ev => {
+			if (ev.key === "Enter" && (ev.ctrlKey || ev.metaKey)) {
+				ev.preventDefault();
+				onclick();
+			}
+		};
+	});
+
+	function onclick() {
+		if (!value) return;
+		onpost && onpost({ value });
+		value = "";
+		area.focus();
+	}
+</script>
+
+<div
+	class="wx-comments-textarea"
+	class:wx-flow={flow}
+	data-focus="yes"
+	bind:this={textarea}
+>
+	<div class="wx-textarea-wrapper">
+		{#if author}
+			<div class="wx-textarea-avatar">
+				<UserIcon data={author} />
+			</div>
+		{/if}
+		<TextArea placeholder={_("Add a comment...")} bind:value />
+	</div>
+	<div class="wx-textarea-bottombar">
+		<Button type="primary" {onclick}>{buttonLabel}</Button>
+	</div>
+</div>
+
+<style>
+	.wx-comments-textarea {
+		width: 100%;
+		background-color: inherit;
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
+	.wx-textarea-wrapper {
+		position: relative;
+		display: flex;
+		gap: 8px;
+	}
+	.wx-comments-textarea.wx-flow .wx-textarea-avatar {
+		margin-left: 20px;
+	}
+	.wx-textarea-bottombar {
+		text-align: right;
+	}
+	.wx-textarea-bottombar :global(button) {
+		padding: 6px 16px;
+		font-weight: 600;
+		line-height: 20px;
+	}
+</style>

package/src/helpers/colors.js

@@ -0,0 +1,58 @@
+export function getContrastingColor(color) {
+	if (color.startsWith("hsl")) {
+		const n = toHSLArray(color);
+		return n[2] > 55 ? "dark" : "light";
+	}
+
+	if (color.startsWith("#") || color.startsWith("rgb")) {
+		const rgb = hexToRgb(color, true);
+		const brightness = Math.round(
+			(rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000
+		);
+		return brightness > 180 ? "dark" : "light";
+	}
+
+	// consider it's an html color, most of them are vivid, so
+	return "light";
+}
+
+export function toHSLArray(hslStr) {
+	return hslStr.match(/\d+/g).map(Number);
+}
+
+export function hexToRgb(hex, asObject = false) {
+	if (hex.startsWith("rgb")) {
+		return asObject ? rgbStringToObj(hex) : hex;
+	}
+	let r = 0,
+		g = 0,
+		b = 0;
+
+	// 3 digits
+	if (hex.length == 4) {
+		r = "0x" + hex[1] + hex[1];
+		g = "0x" + hex[2] + hex[2];
+		b = "0x" + hex[3] + hex[3];
+
+		// 6 digits
+	} else if (hex.length == 7) {
+		r = "0x" + hex[1] + hex[2];
+		g = "0x" + hex[3] + hex[4];
+		b = "0x" + hex[5] + hex[6];
+	}
+	r = +r;
+	g = +g;
+	b = +b;
+	return asObject ? { r, g, b } : "rgb(" + r + "," + g + "," + b + ")";
+}
+
+export function rgbStringToObj(rgb) {
+	const sep = rgb.indexOf(",") > -1 ? "," : " ";
+	// Turn "rgb(r,g,b)" into [r,g,b]
+	const arr = rgb.substring(4).split(")")[0].split(sep);
+
+	const r = (+arr[0]).toString(16),
+		g = (+arr[1]).toString(16),
+		b = (+arr[2]).toString(16);
+	return { r: +r, g: +g, b: +b };
+}

package/src/index.js

@@ -0,0 +1,5 @@
+import Comments from "./components/Comments.svelte";
+import Willow from "./themes/Willow.svelte";
+import WillowDark from "./themes/WillowDark.svelte";
+
+export { Comments, Willow, WillowDark };

package/src/libs/lima.es.js

@@ -0,0 +1,337 @@
+function parse(str, ast, notFinal) {
+	let content;
+	let ctype;
+	let headerlevel, newLineCounter;
+	let checkbehind, unsurepoint;
+	let linestart;
+	let i;
+	if (!ast) {
+		ast = {
+			nodes: [{ d: [], t: "p", f: false, i: 0 }],
+			length: 0,
+			state: {},
+		};
+		linestart = 0;
+		headerlevel = 0;
+		checkbehind = -1;
+		unsurepoint = -1;
+		content = "";
+		ctype = "";
+		newLineCounter = 0;
+		i = 0;
+	} else {
+		({
+			linestart,
+			headerlevel,
+			checkbehind,
+			unsurepoint,
+			content,
+			ctype,
+			newLineCounter,
+			i,
+		} = ast.state);
+	}
+	if (unsurepoint) {
+		const b = ast.nodes[ast.nodes.length - 1];
+		if (b.d.length) {
+			ast.length -= b.d[b.d.length - 1].c.length;
+			b.d.pop();
+		}
+	}
+	const finishBlock = notFinal2 => {
+		if (content !== "") {
+			finishText("", notFinal2);
+		}
+		const lastBlock = ast.nodes[ast.nodes.length - 1];
+		lastBlock.f = notFinal2 !== 1;
+		lastBlock.i = i;
+		if (headerlevel > 0) {
+			lastBlock.t = `h${headerlevel}`;
+			headerlevel = -1;
+		}
+		if (notFinal2 === 0) ast.nodes.push({ d: [], t: "p", f: false, i: 0 });
+	};
+	const finishText = (t, notFinal2 = 2) => {
+		const block = ast.nodes[ast.nodes.length - 1];
+		const last = block.d[block.d.length - 1];
+		const utype = notFinal2 === 2 ? ctype : "";
+		if (last && last.t === utype && unsurepoint < 0) {
+			const text = last;
+			ast.length += content.length;
+			text.c = text.c + content;
+			text.i = i;
+		} else {
+			const c =
+				utype === "" && unsurepoint >= 0
+					? str.substring(unsurepoint)
+					: content;
+			ast.length += c.length;
+			block.d.push({ c, t: utype, f: notFinal2 !== 1, i });
+		}
+		if (notFinal2 === 2) {
+			if (t) {
+				unsurepoint = checkbehind;
+			} else {
+				unsurepoint = -1;
+			}
+		}
+		if (notFinal2 !== 1) {
+			content = "";
+			ctype = t;
+			checkbehind = -1;
+		}
+	};
+	for (; i < str.length; i++) {
+		const char = str[i];
+		if (char === "\n") {
+			newLineCounter++;
+			linestart = i + 1;
+			continue;
+		}
+		if (char === " " || char === "	") {
+			if (newLineCounter > 0) {
+				continue;
+			}
+		}
+		if (newLineCounter > 0) {
+			if (newLineCounter > 1) {
+				finishBlock(0);
+			} else {
+				content += "\n";
+			}
+			newLineCounter = 0;
+		}
+		if (char == "*" || char == "`" || char == "#") {
+			if (str[i - 1] == "\\") {
+				content += char;
+			} else if (checkbehind === -1) {
+				checkbehind = i;
+			}
+		} else {
+			if (checkbehind >= 0) {
+				const l = i - checkbehind;
+				if (str[i - 1] == "*") {
+					if (l === 2) {
+						if (ctype === "strong") {
+							finishText("");
+						} else {
+							finishText("strong");
+						}
+					} else if (l === 1) {
+						if (ctype === "em") {
+							finishText("");
+						} else {
+							finishText("em");
+						}
+					}
+					checkbehind = -1;
+				} else if (str[i - 1] == "`" && l == 1) {
+					if (ctype === "code") {
+						finishText("");
+					} else {
+						finishText("code");
+					}
+					checkbehind = -1;
+				} else if (
+					str[i - 1] == "#" &&
+					str[i] === " " &&
+					checkbehind === linestart &&
+					i - checkbehind <= 6
+				) {
+					headerlevel = i - checkbehind;
+					checkbehind = -1;
+					continue;
+				}
+			}
+			if (checkbehind !== -1) {
+				content += str.substring(checkbehind, i);
+				checkbehind = -1;
+			}
+			content += char;
+		}
+	}
+	finishBlock(notFinal ? 1 : -1);
+	if (notFinal) {
+		ast.state = {
+			linestart,
+			headerlevel,
+			checkbehind,
+			unsurepoint,
+			content,
+			ctype,
+			newLineCounter,
+			i,
+		};
+	} else {
+		ast.state = {};
+	}
+	return ast;
+}
+function render(target, ast) {
+	_renderNodes(target, ast.nodes);
+}
+function _renderNodes(target, nodes) {
+	if (!target) return;
+	for (const node of nodes) {
+		if (typeof node.d !== "undefined") {
+			const block = node;
+			const el = document.createElement(block.t);
+			target.appendChild(el);
+			_renderNodes(el, block.d);
+		} else {
+			const text = node;
+			if (text.t) {
+				const el = document.createElement(node.t);
+				el.textContent = text.c;
+				target.appendChild(el);
+			} else {
+				const el = document.createTextNode(text.c);
+				target.appendChild(el);
+			}
+		}
+	}
+}
+function renderNext(target, ast, prevState, distance, cursor) {
+	if (!target) return;
+	return (
+		_renderNodesNext(target, ast.nodes, prevState, distance, 0, cursor) ===
+		0
+	);
+}
+function _renderNodesNext(target, nodes, prevState, distance, level, cursor) {
+	let start = 0,
+		textIndex = 0,
+		el = null,
+		temp = null;
+	const prev = prevState[level];
+	if (prev) {
+		start = prev.nodeIndex;
+		textIndex = prev.textIndex;
+		el = prev.target;
+		temp = prev.temp;
+	}
+	for (let i = start; i < nodes.length; i++) {
+		const node = nodes[i];
+		if (typeof node.d !== "undefined") {
+			const block = nodes[i];
+			if (!el) {
+				el = document.createElement(block.t);
+				target.appendChild(el);
+			}
+			distance = _renderNodesNext(
+				el,
+				block.d,
+				prevState,
+				distance,
+				level + 1,
+				cursor
+			);
+			if (!distance) {
+				prevState[level] = { nodeIndex: i, textIndex: 0, target: el };
+				return 0;
+			}
+			el = null;
+		} else {
+			let textContent;
+			const text = node;
+			if (text.c.length - textIndex > distance) {
+				textContent = text.c.substring(textIndex, textIndex + distance);
+				textIndex += distance;
+				distance = 0;
+			} else {
+				textContent = text.c.substring(textIndex);
+				distance -= text.c.length - textIndex;
+				textIndex = 0;
+			}
+			if (text.t) {
+				if (!el) {
+					el = document.createElement(text.t);
+					target.insertBefore(el, temp);
+					el.textContent = textContent;
+				} else {
+					el.textContent += textContent;
+				}
+			} else {
+				if (!el) {
+					const el2 = document.createTextNode(textContent);
+					target.insertBefore(el2, temp);
+				} else {
+					el.textContent += textContent;
+				}
+			}
+			if (distance === 0) {
+				if (!temp) temp = addCursor(target, cursor);
+				prevState[level] = textIndex
+					? { temp, nodeIndex: i, textIndex, target: el }
+					: { temp, nodeIndex: i + 1, textIndex: 0, target: null };
+				return distance;
+			}
+			el = null;
+		}
+	}
+	prevState[level] = null;
+	if (temp) temp.parentNode.removeChild(temp);
+	return distance;
+}
+function addCursor(parent, name) {
+	const el = document.createElement("div");
+	el.className = name;
+	el.textContent = " ";
+	parent.appendChild(el);
+	return el;
+}
+function asHTML(a) {
+	let out = "";
+	for (const node of a) {
+		if (typeof node.d !== "undefined") {
+			out += "<" + node.t + ">";
+			out += asHTML(node.d);
+			out += "</" + node.t + ">";
+		} else {
+			if (node.t) out += "<" + node.t + ">";
+			out += node.c;
+			if (node.t) out += "</" + node.t + ">";
+		}
+	}
+	return out;
+}
+function asMarkdown(a) {
+	let out = "";
+	let space = "";
+	for (const node of a) {
+		if (typeof node.d !== "undefined") {
+			if (node.t === "h1") {
+				out += space + "# ";
+			} else if (node.t === "h2") {
+				out += space + "## ";
+			} else if (node.t === "h3") {
+				out += space + "### ";
+			} else if (node.t === "h4") {
+				out += space + "#### ";
+			} else if (node.t === "h5") {
+				out += space + "##### ";
+			} else if (node.t === "h6") {
+				out += space + "###### ";
+			} else {
+				out += space;
+			}
+			space = "\n\n";
+			out += asMarkdown(node.d);
+		} else {
+			let wrap = "";
+			if (node.t === "strong") {
+				wrap = "**";
+			} else if (node.t === "em") {
+				wrap = "*";
+			} else if (node.t === "code") {
+				wrap = "`";
+			}
+			out += wrap + node.c + wrap;
+		}
+	}
+	return out;
+}
+function html(s) {
+	return asHTML(parse(s).nodes);
+}
+export { asHTML, asMarkdown, html, parse, render, renderNext };

package/src/themes/Willow.svelte

@@ -0,0 +1,58 @@
+<script>
+	import { Willow } from "wx-svelte-core";
+
+	const { children, fonts } = $$props;
+</script>
+
+{#if children}
+	<Willow {fonts}>
+		{@render children()}
+	</Willow>
+{:else}
+	<Willow {fonts} />
+{/if}
+
+<style>
+	:global(.wx-willow-theme) {
+		--wx-theme-name: willow;
+
+		--wx-comments-background: #ffffff;
+		--wx-comments-line-height: 24px;
+		--wx-comments-border: 1px solid #e6e6e6;
+
+		--wx-comments-msg-background: #d5eaf7;
+		--wx-comments-msg-background-agent: #f4f5f9;
+		--wx-comments-msg-background-hover: rgba(57, 169, 239, 0.03);
+		--wx-comments-avatar-icon-color: #ffffff;
+		--wx-comments-msg-blocks-background: #e6e6e6;
+		--wx-comments-msg-blocks-background-agent: #ffffff;
+		--wx-comments-msg-controls-shadow: 0px 3px 10px 0px
+				rgba(44, 47, 60, 0.12),
+			0px 1px 2px 0px rgba(44, 47, 60, 0.06);
+
+		--wx-comments-sidebar-background: #fafafc;
+		--wx-comments-sidebar-chat-hover: #eaedf5;
+
+		--wx-comments-popup-agent-hover: #f7f7f7;
+		--wx-comments-popup-border: 1px solid #ffffff;
+		--wx-comments-popup-background: #ffffff;
+
+		--wx-comments-textarea-border: var(--wx-comments-border);
+		--wx-comments-textarea-focus-border: 1px solid var(--wx-color-primary);
+		--wx-comments-textarea-color: #475466;
+
+		--wx-comments-button-icon--color-disabled: #9fa1ae;
+
+		--wx-comments-scroll-background: #e6e6e6;
+		--wx-comments-slider-background: #f2f3f7;
+
+		--ww-chat-modal-background: #ffffff;
+
+		--wx-comments-header-background: rgba(122, 103, 235, 0.2);
+		--wx-comments-icon-color: #9fa1ae;
+
+		--wx-comments-button-toggle-sidebar-background: #f2f3f7;
+
+		--wx-avatar-color-dark: #2a2b2d;
+	}
+</style>

package/src/themes/WillowDark.svelte

@@ -0,0 +1,56 @@
+<script>
+	import { WillowDark } from "wx-svelte-core";
+
+	const { children, fonts } = $$props;
+</script>
+
+{#if children}
+	<WillowDark {fonts}>
+		{@render children()}
+	</WillowDark>
+{:else}
+	<WillowDark {fonts} />
+{/if}
+
+<style>
+	:global(.wx-willow-dark-theme) {
+		--wx-theme-name: willow-dark;
+
+		--wx-comments-background: #2b343b;
+		--wx-comments-line-height: 24px;
+		--wx-comments-border: 1px solid #384047;
+
+		--wx-comments-msg-background: rgba(122, 102, 235, 0.2);
+		--wx-comments-msg-background-agent: #384047;
+		--wx-comments-msg-background-hover: rgb(122, 103, 235, 0.1);
+		--wx-comments-avatar-icon-color: #2b343b;
+		--wx-comments-msg-blocks-background: #384047;
+		--wx-comments-msg-blocks-background-agent: #20262b;
+		--wx-comments-msg-controls-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.16);
+
+		--wx-comments-sidebar-background: #2a2b2d;
+		--wx-comments-sidebar-chat-hover: #384047;
+
+		--wx-comments-popup-agent-hover: #384047;
+		--wx-comments-popup-border: var(--wx-comments-border);
+		--wx-comments-popup-background: #2a2b2d;
+
+		--wx-comments-textarea-border: var(--wx-comments-border);
+		--wx-comments-textarea-focus-border: 1px solid var(--wx-color-primary);
+		--wx-comments-textarea-color: rgba(255, 255, 255, 0.9);
+
+		--wx-comments-button-icon--color-disabled: #20262b;
+
+		--wx-comments-scroll-background: #20262b;
+		--wx-comments-slider-background: #384047;
+
+		--ww-chat-modal-background: #2b343b;
+
+		--wx-comments-header-background: #2a2b2d;
+		--wx-comments-icon-color: #9fa1ae;
+
+		--wx-comments-button-toggle-sidebar-background: #384047;
+
+		--wx-avatar-color-dark: #2a2b2d;
+	}
+</style>

package/whatsnew.md

@@ -0,0 +1,15 @@
+### 2.0.0
+
+-   public release
+
+### 0.2.1
+
+-   [update] autofocus is replaced by `focus` property
+
+### 0.2.0
+
+-   [update] data sync api
+
+### 0.1.0
+
+-   initial version