prepare for OS

Simply007 · Simply007 · commit c0b2b90e7467 · 2025-12-02T18:44:05.000+01:00
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -0,0 +1,2 @@
+# Global code owner
+* @Simply007
diff --git a/.github/ISSUE_TEMPLATE/bug-report.md b/.github/ISSUE_TEMPLATE/bug-report.md
@@ -0,0 +1,32 @@
+---
+name: Bug report
+about: Create a report to help us improve
+---
+
+### Brief bug description
+
+What went wrong?
+
+### Repro steps
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+### Expected behavior
+
+What is the correct behavior?
+
+### Test environment
+
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
+
+### Additional context
+
+Add any other context about the problem here.
+
+### Screenshots
+
+Add links to screenshots, if possible.
diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md
@@ -0,0 +1,13 @@
+---
+name: Question
+about: Ask a question
+
+---
+
+### Question
+
+What do you want to ask?
+
+### Reference
+
+* URL
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,17 @@
+### Motivation
+
+Which issue does this fix? Fixes #`issue number`
+
+If no issue exists, what is the fix or new feature? Were there any reasons to fix/implement things that are not obvious?
+
+### Checklist
+
+- [ ] Code follows coding conventions held in this repo
+- [ ] Automated tests have been added
+- [ ] Tests are passing
+- [ ] Docs have been updated (if applicable)
+- [ ] Temporary settings (e.g. variables used during development and testing) have been reverted to defaults
+
+### How to test
+
+If manual testing is required, what are the steps?
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -0,0 +1,33 @@
+name: Build
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+      
+    - name: Setup Node.js LTS
+      uses: actions/setup-node@v4
+      with:
+        node-version: 'lts/*'
+        cache: 'npm'
+        
+    - name: Install dependencies
+      run: npm ci
+      
+    - name: Build with Vite
+      run: npm run build
+      
+    - name: Upload build artifacts
+      uses: actions/upload-artifact@v4
+      with:
+        name: dist
+        path: dist/
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,41 @@
+# Software License Agreement
+
+Copyright (c) 2014-2025, CKSource Holding sp. z o.o. All rights reserved.
+
+Code samples in this repository are licensed under the terms of the MIT License (see Appendix A):
+
+    http://en.wikipedia.org/wiki/MIT_License
+
+Please bear in mind that while these code samples are available under MIT License, the CKEditor 5 software [is licensed differently](https://github.com/ckeditor/ckeditor5/blob/stable/LICENSE.md).
+
+## Trademarks
+
+CKEditor is a trademark of CKSource Holding sp. z o.o. All other brand
+and product names are trademarks, registered trademarks or service
+marks of their respective holders.
+
+---
+
+## Appendix A: The MIT License
+
+The MIT License (MIT)
+
+Copyright (c) 2014-2023, CKSource Holding 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.
diff --git a/README.md b/README.md
@@ -1,16 +1,125 @@
-# React + Vite
+# CKEditor AI Webinar Showcase
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A sample React-based application demonstrating CKEditor AI features. This interactive demo showcases AI-powered editing capabilities including AI Chat, Quick Actions, and Review Mode in a real-world content management interface.
 
-Currently, two official plugins are available:
+## Getting Started
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+### Prerequisites
 
-## React Compiler
+- Node.js
+- npm or yarn
+- [CKEditor trial/premium license](https://portal.ckeditor.com/signup)
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+### Installation
 
-## Expanding the ESLint configuration
+1. **Install dependencies:**
 
-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+   ```sh
+   npm install
+   ```
+
+2. **Configure environment variables:**
+
+   - Copy `.env.example` to `.env`
+   - Fill in your CKEditor credentials from the [CKEditor Portal](https://portal.ckeditor.com/):
+     - `VITE_CKEDITOR_LICENSE_KEY`
+     - `VITE_CKEDITOR_CLOUD_SERVICES_TOKEN_URL`
+
+3. **Start the development server:**
+
+   ```bash
+   npm run dev
+   ```
+
+4. **Open your browser at `http://localhost:5173` 🎉**
+
+## About CKEditor AI
+
+This demo showcases [CKEditor AI](https://ckeditor.com/ckeditor-ai), a suite of AI-powered features that enhance content creation and editing. Main focus is to demonstrate configuration and customization capabilities of following features:
+
+- **AI Chat**: Conversational AI assistant integrated into the editor for content generation, editing, and questions
+- **AI Quick Actions**: Context-aware shortcuts for common AI operations (summarize, rephrase, translate, etc.)
+- **AI Review Mode**: Comprehensive content analysis with suggestions for improvements
+
+## Interactive Tasks
+
+The codebase includes **5 hands-on tasks** to explore CKEditor AI customization. Each task is marked with comments
+
+```js
+// 📌 Task ...
+```
+
+in `src/components/ContentField.jsx`.
+
+Complete them sequentially for the best learning experience.
+
+### 📌 Task 1: Integrate AI Sidebar to the Editor
+
+Move the AI interface from an overlay popup to the right sidebar for a more integrated experience.
+
+**Steps:**
+
+1. Import `useSidebar` import and use it to get a reference to the sidebar element
+2. Comment out the `toggleAi` button in toolbar since you won't need it anymore
+3. Update AI container config from `type: 'overlay'` to `type: 'sidebar'` and provide the sidebar container reference
+4. Remove the placeholder span in `RightSidebar.jsx` and ensure the AI chat is rendered in the whole sidebar container
+
+**Expected Result:** AI chat appears integrated in the right sidebar; no overlay popup; toggle button removed from toolbar.
+
+---
+
+### 📌 Task 2: Custom Model Selection
+
+Enable AI model selection dropdown with specified model options.
+
+**Steps:** Uncomment the model configuration block
+
+**Expected Result:** Model selector dropdown in AI chat interface contains only specified models, not all of them.
+
+---
+
+### 📌 Task 3: Custom Context Sources
+
+Add custom knowledge source group that AI can reference when generating content.
+
+**Steps:** Uncomment the `sources` array in context configuration.
+
+**Included Sources in one source group:**
+
+- **"Email Guidelines"** - Web resource with email writing standards
+- **"Content Creation Guidelines"** - Web resource with content best practices
+
+**Expected Result:** New "Internal Guidelines" section appears in AI context menu; AI can cite and follow these guidelines when generating content.
+
+---
+
+### 📌 Task 4: Custom Quick Actions
+
+Add custom AI commands to the quick actions menu.
+
+**Steps:** Uncomment the `extraCommands` array in quick actions configuration.
+
+**Example Actions:**
+
+- **"Ask expert AI about this"** (CHAT type) - Opens AI chat with expert analysis prompt for non-technical explanations
+- **"Enhance by links"** (ACTION type) - Automatically adds relevant hyperlinks to selected text
+
+**Expected Result:** Custom actions appear in quick actions menu (both toolbar and balloon menu).
+
+---
+
+### 📌 Task 5: Custom Translation in Review Mode
+
+Specify language options for AI-powered translation.
+
+**Steps:** Uncomment the `translations` in review mode configuration.
+
+**Expected Result:** Only Polish and Czech appear in the translation dropdown in AI Review Mode.
+
+### Learn More
+
+- [CKEditor AI Overview](https://ckeditor.com/ckeditor-ai)
+- [Get Trial License](https://portal.ckeditor.com/signup/)
+- [CKEditor Builder](https://ckeditor.com/ckeditor-5/builder/)
+- [CKEditor AI Documentation](https://ckeditor.com/docs/ckeditor5/latest/features/ai/ckeditor-ai-overview.html)
+- [CKEditor AI demo](https://ckeditor.com/ckeditor-5/capabilities/ai-features/)
diff --git a/package.json b/package.json
@@ -1,7 +1,6 @@
 {
-  "name": "ckeditor-ai-webinar-showcase",
-  "private": true,
-  "version": "0.0.0",
+  "name": "devrel-ckeditor-ai-showcase-react",
+  "version": "0.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/components/ContentField.jsx b/src/components/ContentField.jsx
@@ -85,6 +85,7 @@ import {
 import 'ckeditor5/ckeditor5.css';
 import 'ckeditor5-premium-features/ckeditor5-premium-features.css';
 
+// 📌 Task 1: Integrate AI Sidebar to the Editor - uncomment import
 // import { useSidebar } from '../contexts/useSidebar';
 
 // ✏️ removed: import './App.css'; - using only default styles
@@ -100,6 +101,7 @@ export default function ContentField({
   onChange,
 }) {
 
+  // 📌 Task 1: Integrate AI Sidebar to the Editor - load the reference to the Sidebar container ref
   // const { sidebarElement } = useSidebar();
   const editorContainerRef = useRef(null);
   const editorMenuBarRef = useRef(null);
@@ -126,6 +128,7 @@ export default function ContentField({
             'redo',
             '|',
             // ⭐ TOOLBAR BUTTONS CONFIGURATION
+            // 📌 Task 1: Integrate AI Sidebar to the Editor - comment toggleAI button in the app
             'toggleAi',
             'aiQuickActions',
             '|',
@@ -249,6 +252,8 @@ export default function ContentField({
         // ⭐ AI CONFIG
         ai: {
           container: {
+            // 📌 Task 1: Integrate AI Sidebar to the Editor:
+            // comment type and side and uncomment the rest of the block
             type: 'overlay',
             side: 'right'
             // type: 'sidebar',
@@ -258,6 +263,7 @@ export default function ContentField({
           },
           chat: {
             models: {
+              // 📌 Task 2: Custom model selection - uncomment the block
               // defaultModelId: 'auto',
               // modelSelectorAlwaysVisible: true,
               // displayedModels: ['claude-4-5-sonnet', 'auto', 'claude-4-5-haiku', 'gpt-mini']
@@ -272,6 +278,7 @@ export default function ContentField({
               files: {
                 enabled: true
               },
+              // 📌 Task 3: Custom context sources - uncomment the block
               // sources: [
               //   {
               //     id: "guidelines",
@@ -300,6 +307,7 @@ export default function ContentField({
             }
           },
           quickActions: {
+            // 📌 Task 4: Custom quick actions - uncomment the block
             // extraCommands: [
             //   // An action that opens the AI Chat interface for interactive conversations.
             //   {
@@ -319,6 +327,7 @@ export default function ContentField({
             // ],
           },
           reviewMode: {
+            // 📌 Task 5: Custom translation in review mode - uncomment the block
             // translations: [
             //   {
             //     id: 'polish',
@@ -337,7 +346,7 @@ export default function ContentField({
           tokenUrl: CLOUD_SERVICES_TOKEN_URL
         },
         collaboration: {
-          // ✏️ TOOLBAR BUTTONS CONFIGURATION
+          // ✏️ Identification of the document
           channelId: contentKey
         },
         fontFamily: {
diff --git a/src/components/RightSidebar.jsx b/src/components/RightSidebar.jsx
@@ -84,6 +84,7 @@ const RightSidebar = () => {
         <div className="sidebar-section-content" style={{ display: expandedSections['ai-chat'] ? 'flex' : 'none', padding: 0 }}>
           <div ref={registerSidebarElement} id="ai-sidebar-container" style={{ width: '100%', height: '100%' }}>
             {/* CKEditor AI interface will be rendered here */}
+            {/* // 📌 Task 1: Integrate AI Sidebar to the Editor - remove the placeholder span below*/}
             <span style={{ margin: '10px', padding: '10px', border: '1px dashed #ccc', fontSize: '13px', color: '#888' }}>CKEditor AI Chat interface placeholder</span>
           </div>
         </div>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+# Global code owner`
	`2`	`+* @Simply007`