Merge pull request #3 from valiantlynx/valiantlynx-turborepo

Valiantlynx turborepo

.github/workflows/changeset.yaml

@@ -0,0 +1,40 @@
+---
+# This workflow will release the packages with Changesets
+
+name: 🚀 CI - publish
+
+on:
+  push:
+    branches:
+      - 'main'
+  workflow_dispatch:
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - name: Install Dependencies
+        run: yarn
+
+      - name: Build
+        run: yarn build && yarn package
+
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          # This expects you to have a script called release which does a build for your packages and calls changeset publish
+          publish: yarn release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

CHANGELOG.md

@@ -4,24 +4,16 @@
 
 ### Patch Changes
 
-- 217ad5c: updating the readme , adding two props to customize block gap and margin-block
-- Updated dependencies [217ad5c]
-  - @valiantlynx/svelte-rich-text@0.0.4
+- 997dfad: finally able to release a functioning one
 
 ## 0.0.3
 
 ### Patch Changes
 
-- d38082b: updating the readme
+- f1d52b6: bug fix, the projects was published before it was built
 
 ## 0.0.2
 
 ### Patch Changes
 
-- 7baad92: removing the ondestroy method and adding a return function from onMount because it execute in the server
-
-## 0.0.1
-
-### Patch Changes
-
-- 7baad92: adding if browser condition when executing onMount and onDestroy to prevent window is not defined
+- 46c3fb7: Renamed dome of the stuff and changed the images for the default start

README.md

@@ -1,4 +1,3 @@
-
 # Valiant Rich Text Svelte Component
 
 ![valiantlynx logo](./static/valiantlynx.jpg)
@@ -15,7 +14,7 @@ To get started with the Valiant Rich Text Svelte Component, you can install it v
 npm install @valiantlynx/svelte-rich-text
 # or
 yarn add @valiantlynx/svelte-rich-text
-# or 
+# or
 pnpm i @valiantlynx/svelte-rich-text
 ```
 
@@ -45,38 +44,41 @@ The rich text editor works with a specific data structure known as `dataBlock`.
 
 ```ts
 type dataBlock =
-| { name: 'image'; id: string; data: { base64: string; name: string; caption: string } }
-| { name: 'paragraph'; id: string; data: { text: string } }
-| { name: 'code'; id: string; data: { text: string; lang: languages } }
-| { name: 'quote'; id: string; data: { text: string; owner: string } }
-| { name: 'header'; id: string; data: { text: string; level: 1 | 2 | 3 | 4 } }
-| { name: 'space'; id: string; data: { size: number } }
-| { name: 'list'; id: string; data: { items: string[]; type: 'ordered' | 'unordered' } };
+	| { name: 'image'; id: string; data: { base64: string; name: string; caption: string } }
+	| { name: 'paragraph'; id: string; data: { text: string } }
+	| { name: 'code'; id: string; data: { text: string; lang: languages } }
+	| { name: 'quote'; id: string; data: { text: string; owner: string } }
+	| { name: 'header'; id: string; data: { text: string; level: 1 | 2 | 3 | 4 } }
+	| { name: 'space'; id: string; data: { size: number } }
+	| { name: 'list'; id: string; data: { items: string[]; type: 'ordered' | 'unordered' } };
 ```
 
 ### Block States
 
-Each block in the Valiant Rich Text editor can exist in one of three states: 
+Each block in the Valiant Rich Text editor can exist in one of three states:
 
-1. **View State:** In this state, the block displays its information based on its type and associated data. 
-2. **Focus State:** When a user clicks on a block, it switches to the focus state. In this state, the block is wrapped with a wrapper that provides options for deleting the block and reordering it (moving it up or down). 
+1. **View State:** In this state, the block displays its information based on its type and associated data.
+2. **Focus State:** When a user clicks on a block, it switches to the focus state. In this state, the block is wrapped with a wrapper that provides options for deleting the block and reordering it (moving it up or down).
 3. **Edit State:** Upon another click, the block enters the edit state, allowing the user to modify the block's information. ## Customization
 
 ## Customization
 
 You can customize various aspects of the rich text editor:
 
 - **Colors:**
+
   - `primaryColor`: Used in both focus and view states.
   - `secondaryColor`: Specifically used in the edit state.
   - `textColor`: Defines the text color within the editor.
   - `bgColor`: Specifies the background color of the editor.
 
 - **Fonts:**
+
   - `headerFont`: Set the font for header elements (e.g., h1, h2, h3, h4).
   - `bodyFont`: Define the font for general text elements (e.g., p, span, label, li, a).
 
 - **Font Sizes and Line Heights:**
+
   - Customize font sizes using `h1`, `h2`, `h3`, `h4`, `body`, `small`.
   - Set line heights for various text elements using `lh1`, `lh2`, `lh3`, `lh4`, and `lbody`.
 
@@ -89,34 +91,30 @@ You can customize various aspects of the rich text editor:
 - **Custom spacing:** By default **valiant** separate blocks with 10px gap and have **margin-block** set to 30px you can change that using **blocksGap** and **marginBlock** props .
 
 - **Custom Components:** You can replace the default view components for various block types with your custom components. For example:
-    - `customImage` for image blocks
-    - `customCode` for code blocks
-    - `customList` for list blocks
-    - `customHeader` for header blocks
-    - `customParagraph` for paragraph blocks
-    - `customQuote` for quote blocks
+  - `customImage` for image blocks
+  - `customCode` for code blocks
+  - `customList` for list blocks
+  - `customHeader` for header blocks
+  - `customParagraph` for paragraph blocks
+  - `customQuote` for quote blocks
 
 ```ts
 export let customImage: ComponentType<
-SvelteComponent<{ base64: string; name: string; caption: string }>
+	SvelteComponent<{ base64: string; name: string; caption: string }>
 > = ViewImage;
 
-export let customCode: ComponentType<SvelteComponent<{ text: string; lang: languages }>> =
-ViewCode;
+export let customCode: ComponentType<SvelteComponent<{ text: string; lang: languages }>> = ViewCode;
 
 export let customList: ComponentType<
-SvelteComponent<{ items: string[]; type: 'ordered' | 'unordered' }>
+	SvelteComponent<{ items: string[]; type: 'ordered' | 'unordered' }>
 > = ViewList;
 
 export let customHeader: ComponentType<SvelteComponent<{ text: string; level: 1 | 2 | 3 | 4 }>> =
-ViewHeader;
-
-export let customParagraph: ComponentType<SvelteComponent<{ text: string }
+	ViewHeader;
 
->> = ViewParagraph;
+export let customParagraph: ComponentType<SvelteComponent<{ text: string }>> = ViewParagraph;
 
-export let customQuote: ComponentType<SvelteComponent<{ text: string; owner: string }>> =
-ViewQuote;
+export let customQuote: ComponentType<SvelteComponent<{ text: string; owner: string }>> = ViewQuote;
 ```
 
 ## View Mode
@@ -201,31 +199,29 @@ export let lbody = '1.6';
 export let codeTheme: string = nightOwl;
 
 export let customImage: ComponentType<
-SvelteComponent<{ base64: string; name: string; caption: string }>
+	SvelteComponent<{ base64: string; name: string; caption: string }>
 > = ViewImage;
 
-export let customCode: ComponentType<SvelteComponent<{ text: string; lang: languages }>> =
-ViewCode;
+export let customCode: ComponentType<SvelteComponent<{ text: string; lang: languages }>> = ViewCode;
 
 export let customList: ComponentType<
-SvelteComponent<{ items: string[]; type: 'ordered' | 'unordered' }>
+	SvelteComponent<{ items: string[]; type: 'ordered' | 'unordered' }>
 > = ViewList;
 
 export let customHeader: ComponentType<SvelteComponent<{ text: string; level: 1 | 2 | 3 | 4 }>> =
-ViewHeader;
+	ViewHeader;
 
 export let customParagraph: ComponentType<SvelteComponent<{ text: string }>> = ViewParagraph;
 
-export let customQuote: ComponentType<SvelteComponent<{ text: string; owner: string }>> =
-ViewQuote;
+export let customQuote: ComponentType<SvelteComponent<{ text: string; owner: string }>> = ViewQuote;
 
 export let codeBlockLanguages: languages[] = [
-'javascript',
-'java',
-'c',
-'css',
-'typescript',
-'python',
-'csharp'
+	'javascript',
+	'java',
+	'c',
+	'css',
+	'typescript',
+	'python',
+	'csharp'
 ];
 ```

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@valiantlynx/svelte-rich-text",
-	"version": "0.0.1",
+	"version": "0.0.4",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -30,7 +30,7 @@
 		"build": "vite build",
 		"preview": "vite preview",
 		"package": "svelte-kit sync && svelte-package && publint",
-		"release": "pnpm run package && npx changeset publish",
+		"release": "yarn package && npx changeset publish",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"test": "vitest",
@@ -84,7 +84,6 @@
 		}
 	},
 	"dependencies": {
-
 		"short-uuid": "^4.2.2",
 		"svelte-highlight": "^7.4.1",
 		"svelte-select": "^5.7.0"

src/lib/index.js

@@ -7,3 +7,7 @@ export { default as ValiantRichText } from './components/core/main.svelte';
 export function getData() {
 	return get(data);
 }
+
+export function setData(newData) {
+	data.set(newData);
+}