docs: [AILab-146] Improve quality of description

Author: kyrylo.kireiev

src/plugin-slots/ProblemEditorPluginSlot/README.md

@@ -29,6 +29,26 @@ It is a **generic extension point** that can host any React component, such as:
 Your component is responsible for interacting with the editor state (if needed) using
 Redux, `window.tinymce`, CodeMirror, or other utilities provided by `frontend-app-authoring`.
 
+#### Interacting with Editor State (Reading State from Redux)
+
+```jsx
+import { useSelector } from 'react-redux';
+import { selectors } from 'CourseAuthoring/editors/data/redux';
+
+const MyComponent = ({ blockType }) => {
+  // Read problem state
+  const problemState = useSelector(selectors.problem.completeState);
+  const learningContextId = useSelector(selectors.app.learningContextId);
+  const showRawEditor = useSelector(selectors.app.showRawEditor);
+  
+  // Access problem data
+  const question = problemState?.question || '';
+  const answers = problemState?.answers || [];
+  
+  return <div>Question: {question}</div>;
+};
+```
+
 ## Examples
 
 ### Default content

src/plugin-slots/ProblemEditorPluginSlot/images/screenshot_custom.png

@@ -11,23 +11,44 @@
 
 ## Description
 
-The `TextEditorPluginSlot` is rendered inside the Text Editor modal window for HTML XBlocks.
+The `TextEditorPluginSlot` is rendered inside the Text Editor modal window for HTML XBlocks. 
+By default, the slot is **empty**.
 It is intended as a generic extension point that can host **any React component** – for example:
 
 - **Contextual helpers** (tips, validation messages, writing guides)
 - **Content utilities** (templates, reusable snippets, glossary insert tools)
 - **Integrations** (linking to external systems, analytics, metadata editors)
 
-By default, the slot is **empty**. Widgets are attached via `env.config.jsx` using the
-`@openedx/frontend-plugin-framework`.
-
-The only prop your component receives from the slot is:
-
-- `blockType` – the current editor block type (for this slot it will typically be `html`).
-
 Your component is responsible for interacting with the editor (if needed) using Redux state,
 DOM APIs, or other utilities provided by `frontend-app-authoring`.
 
+#### Interacting with Editor State
+
+```jsx
+import { useSelector } from 'react-redux';
+import { selectors } from 'CourseAuthoring/editors/data/redux';
+
+const MyComponent = ({ blockType }) => {
+  // Read editor state
+  const showRawEditor = useSelector(selectors.app.showRawEditor);
+  const blockValue = useSelector(selectors.app.blockValue);
+  
+  // Update CodeMirror (raw editor)
+  const updateRawContent = (content) => {
+    const cm = document.querySelector('.CodeMirror')?.CodeMirror;
+    if (cm?.dispatch) {
+      cm.dispatch(cm.state.update({
+        changes: { from: 0, to: cm.state.doc.length, insert: content }
+      }));
+    }
+  };
+  
+  return <button onClick={() => showRawEditor ? updateRawContent('<p>New content</p>') : updateContent('<p>New content</p>')}>
+    Update Editor
+  </button>;
+};
+```
+
 ## Examples
 
 ### Default content