First Commit

.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.eslintrc.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+	root: true,
+	extends: ['eslint:recommended', 'plugin:svelte/recommended', 'prettier'],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+node_modules
+/build
+/dist
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+resolution-mode=highest

.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.prettierrc

@@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

README.md

@@ -0,0 +1,60 @@
+# svelte-quill
+
+`svelte-quill` is an unofficial wrapper for Quill.js, designed specifically for seamless integration with SvelteKit projects. This library allows you to easily add rich text editing capabilities to your SvelteKit applications with the flexibility to customize the editor's appearance and behavior to suit your needs.
+
+### Features
+
+- Based on Quill.js: Benefit from the robustness and reliability of Quill.js, a popular and battle-tested rich text editor library.
+- SvelteKit Compatibility: Integrates effortlessly with SvelteKit, providing optimal performance and a smooth developer experience.
+
+### Installation
+
+You can install the Svelte-Quill component library using npm:
+
+```
+npm install svelte-quill
+```
+
+### Usage
+
+```html
+<script>
+	import Quill from '$lib/Quill.svelte'; //Import Quill Component
+	let content = { html: '<p>Hello</p>', text: 'Hello' }; //Initialize Rich Text Editor Content
+</script>
+
+<Quill bind:content theme="bubble" class="text-xl">
+	<p>Loading...</p>
+</Quill>
+
+<!----View Editor Content--->
+<pre>{JSON.stringify(content)}</pre>
+```
+
+### Props
+
+The following are props you can pass to the Quill component
+| Prop | Description |
+| --- | ----------- |
+| Loading Slot | Set your own loading indicator for the editor as it loads. (svelte-quill uses {#await} for rendering ) |
+| theme | Theme of the editor (`snow` or `bubble`) |
+| class| pass css classes to editor |
+
+### Important
+
+#### Using custom classes for styling
+
+This is a dirty way to achieve this but it works, adding read Quill documentation to TODO. Feel free to clone or contribute and improve this library.
+
+1. Use a CSS framework such as TailwindCSS for styling ...OR
+2. If using plain css; pass classes via <svelte:head> and target editor container id `#ql`
+
+```html
+<svelte:head>
+	<style>
+		#ql.text-xl {
+			font-size: 1.2rem;
+		}
+	</style>
+</svelte:head>
+```

jsconfig.json

@@ -0,0 +1,11 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"moduleResolution": "NodeNext"
+	}
+}

package.json

@@ -0,0 +1,67 @@
+{
+	"name": "svelte-quill",
+	"version": "0.0.1",
+	"license": "MIT",
+	"contributors": [
+		"Guy Natumanya"
+	],
+	"description": "Reusable and customizable social media buttons for your web applications",
+	"keywords": [
+		"svelte",
+		"sveltekit",
+		"quill",
+		"svelte-quill",
+		"WYSIWYG",
+		"rich text editor",
+		"editor"
+	],
+	"author": "Natumanya Guy Muriro <muriro.com> (https://www.muriro.com/)",
+	"homepage": "",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.20.4",
+		"@sveltejs/package": "^2.0.0",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte": "^2.30.0",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.10.1",
+		"publint": "^0.1.9",
+		"svelte": "^4.0.5",
+		"svelte-check": "^3.4.3",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^4.4.2"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"dependencies": {
+		"svelte-quill": "^1.2.0"
+	}
+}