Skip to content

Commit 7f6b2f7

Browse files
committed
docs: add LibreSign integration architecture guide
- Document Phase 1: New Tab strategy (current implementation) - Explain 3-layer Nextcloud URL resolution - Outline Phase 2: Modal integration with postMessage - Outline Phase 3: SDK architecture for deep integration - Add configuration requirements for EuroOffice app - Include debugging section with common issues - Document testing strategy across phases - Provide code examples for each integration layer Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
1 parent 7041d53 commit 7f6b2f7

1 file changed

Lines changed: 167 additions & 0 deletions

File tree

docs/MAINTAINERS.md

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,3 +65,170 @@ Before upgrading `plugins.js`, test compatibility with target EuroOffice/ONLYOFF
6565

6666
- `.github/workflows/ci.yml`: validation and package artifact for push/PR.
6767
- `.github/workflows/release.yml`: build and publish assets on version tags.
68+
69+
## LibreSign Integration Architecture
70+
71+
### Overview
72+
73+
The LibreSign EuroOffice plugin provides a sidebar panel inside the EuroOffice editor that allows users to sign and request signatures for documents. Integration happens through:
74+
75+
1. **Plugin iframe** (index.html) running in ONLYOFFICE/EuroOffice plugin sandbox
76+
2. **Nextcloud origin** hosting both the plugin and LibreSign app
77+
3. **PostMessage API** for future cross-iframe communication
78+
79+
### Current Implementation: New Tab (Phase 1)
80+
81+
**Strategy**: Open LibreSign in a new browser tab using `window.open()`.
82+
83+
**Why this works**:
84+
- ✅ No CORS issues (browser same-site policy allows cross-tab navigation)
85+
- ✅ Simple, reliable, no DOM manipulation needed
86+
- ✅ No Content Security Policy (CSP) conflicts
87+
- ✅ Easy fallback if more complex modes fail
88+
89+
**How it works**:
90+
91+
```
92+
User clicks "Sign Document" button
93+
94+
Plugin calls getNextcloudUrl() with 3-layer fallback:
95+
1. window.__LIBRESIGN_CONFIG__.nextcloudUrl (pre-configured by Nextcloud)
96+
2. ?nc_url= query parameter (manual override)
97+
3. window.location.origin (auto-detect same-origin)
98+
99+
Plugin opens: https://nextcloud.example.com/apps/libresign/#/f/filelist/sign
100+
101+
User signs document in new tab
102+
103+
(Future) New tab can communicate back via window.opener.postMessage()
104+
```
105+
106+
**Configuration in Nextcloud app**:
107+
108+
The EuroOffice app (`apps/eurooffice` in parent Nextcloud repo) is responsible for:
109+
110+
1. Loading the plugin iframe (already done)
111+
2. Pre-configuring plugin URL (TODO - add to EuroOffice app):
112+
113+
```js
114+
// apps/eurooffice/js/plugin-config.js (suggested location)
115+
window.__LIBRESIGN_CONFIG__ = {
116+
nextcloudUrl: OC.getRootUrl(), // or similar
117+
mode: 'new-tab' // future: 'modal', 'sidebar'
118+
};
119+
```
120+
121+
Then inject before loading plugin:
122+
123+
```html
124+
<!-- In EuroOffice app view -->
125+
<script src="plugin-config.js"></script>
126+
<iframe src="/sdkjs-plugins/libresign/index.html"></iframe>
127+
```
128+
129+
### Future Implementation: Modal (Phase 2)
130+
131+
**Goal**: Keep user in same window during signing (reduce distraction).
132+
133+
**Architecture**:
134+
135+
```
136+
Plugin sends postMessage:
137+
window.parent.postMessage({
138+
type: 'libresign:open',
139+
mode: 'modal',
140+
documentContext: { fileName, fileId, ... }
141+
}, origin)
142+
143+
Nextcloud app (eurooffice) receives message
144+
145+
Nextcloud injects LibreSign modal DOM
146+
(respects CSP by being server-rendered or sandboxed iframe)
147+
148+
User signs in modal
149+
150+
Modal returns result via postMessage
151+
152+
Plugin updates document with annotation
153+
```
154+
155+
**Required changes**:
156+
- Extend EuroOffice app with message listener
157+
- Create modal bridge component
158+
- Add communication layer between plugin and modal
159+
160+
### Future Implementation: SDK (Phase 3)
161+
162+
**Goal**: Professional, npm-consumable SDK for deep LibreSign integration.
163+
164+
**Concept**:
165+
166+
```ts
167+
// npm package: @libresign/plugin-sdk
168+
169+
import { LibreSignPlugin } from '@libresign/plugin-sdk';
170+
171+
const libresign = new LibreSignPlugin({
172+
nextcloudUrl: 'https://...',
173+
mode: 'modal', // configurable
174+
viewer: euroOfficeViewer // pass instance for annotations
175+
});
176+
177+
libresign.signDocument({
178+
file: documentHandle,
179+
onComplete: (sig) => {
180+
euroOfficeViewer.addSignature(sig);
181+
}
182+
});
183+
```
184+
185+
**Benefits**:
186+
- Reusable across browser extensions, other apps
187+
- Type-safe (TypeScript)
188+
- Versioning independent of plugin
189+
- Can be distributed via npm
190+
191+
### Debugging
192+
193+
**Check if config is loaded**:
194+
195+
```js
196+
// In browser console while plugin sidebar is open:
197+
console.log(window.__LIBRESIGN_CONFIG__);
198+
console.log(window.location);
199+
```
200+
201+
**Check URL resolution**:
202+
203+
```js
204+
// Plugin calls this internally, but you can inspect:
205+
getNextcloudUrl() // Should return https://your-nextcloud-domain
206+
getDocumentContext() // Should return { fileName, fileId, fileUrl }
207+
```
208+
209+
**Common issues**:
210+
211+
| Issue | Cause | Fix |
212+
|-------|-------|-----|
213+
| Opens in same tab, replaces editor | w.open() not supported | Check browser CSP, HTTPS context |
214+
| Wrong Nextcloud URL | Layer 2 or 3 fallback triggered | Inject `window.__LIBRESIGN_CONFIG__` in EuroOffice app |
215+
| Modal doesn't appear (Phase 2) | EuroOffice app not listening for postMessage | Add event listener in eurooffice app |
216+
| CORS error when signing | New tab navigated to wrong domain | Verify `?nc_url=` parameter or config object |
217+
218+
### Testing Strategy
219+
220+
**Unit testing** (Phase 1):
221+
- Mock window.open()
222+
- Test URL resolution with different configs
223+
- Verify message listeners registered
224+
225+
**Integration testing** (Phase 2+):
226+
- Spin up Nextcloud + EuroOffice + LibreSign stack
227+
- Test real postMessage flow
228+
- Verify signature annotation appears in document
229+
230+
**E2E testing** (Phase 3+):
231+
- Use Playwright to interact with full stack
232+
- Sign document end-to-end
233+
- Verify LibreSign sidebar updates correctly
234+

0 commit comments

Comments
 (0)