How to implement real time collaboration in atlaskit editor? - javascript

I am trying to use the Editor Component of Atlaskit to create a real time WYSIWYG editor however there is no proper documentation to get things done I am confused at the collabEdit part, React gives an error: cannot resolve CollabProvider, what exactly is this CollabProvider and how does it work ?
<Editor appearence="comment" collabEdit={{
useNativePlugin: true,
provider: Promise.resolve(
new CollabProvider(
{
url: 'http://localhost:3000',
securityProvider: () => ({
headers: {
Authorization: asapToken,
'user-ari': userId,
},
omitCredentials: true,
}),
docId: 24,
userId: 12,
},
pubSubClient,
),
),
inviteToEditHandler: this.inviteToEditHandler,
userId: 12,
isInviteToEditButtonSelected: true
}} />

In my experience you need to use Atlaskit editor + Prosemirror tweak + y-websocket: https://demos.yjs.dev/atlaskit/atlaskit.html. I'm still trying to figure out the whole thing by myself. I still don't understand how <img> elements should be enabled. See the source of demo at https://github.com/yjs/yjs-demos/tree/master/atlaskit.
Note that you need to modify the atlaskit.js in the demo to point to your own server
const provider = new WebsocketProvider('wss://demos.yjs.dev', 'atlaskit', ydoc)
The first argument is the y-websocket server and the another parameter is the channel name for the collaboration.
The method for persisting the y-websocket server data is still a bit unknown. See https://github.com/yjs/y-websocket/issues/14 for details about that. If you plan on running the y-websocket server on one machine and you're happy with simple file backed database, using y-leveldb might be enough.

Related

Loopback4 - How to upload file to POSTS model

I'm using Loopback4 to create a sort-of blog api. My posts model will contain an image (or perhaps several in the future).
What i'm trying to do is -> upload image when creating a new post.
I've read quite a few articles regarding this, but since i'm new to nodejs and loopback4 i'm having a bit of trouble making it work.
I've followed the answer written here Loopback 4: Upload multipart/form-data via POST method and i'm encountering some problems with it.
First: I'm using MySQL. Is there any way to save the image in the database? Or is it not a good practice? The work-around would be to upload the image and save only the image location in the DB.
Second: After following the tutorial and ending up with the code created i made a new post request for testing purposes. It looks something like this.
#post('/posts/upload', {
responses: {
'200': {
description: 'Post model instance',
content: { 'application/json': { schema: { type: 'object' } } },
},
},
})
async uploadFile(#requestBody({
description: 'multipart/form-data value.',
required: true,
content: {
[FORM_DATA]: {
schema: { 'media-type': Post },
},
},
})
body: unknown,
) {
return body;
}
That creates my post request in Swagger, but it shows like a big input box (text input). As far as i know swagger supports upload button. Is the content-type wrong? How could i test my upload function? I did something similar in NetCore2 and i had to convert my image to bytes (if i remember correctly), is the same problem here?
Any tips? Thanks!

Contentful JS: Unable to retrieve entries by matching Reference field

I am using Contentful's Javascript API to build a project. Currently, I'm having an issue where I get "undefined" as a return for the following call.
const query = {
content_type: "vehicle",
include: 2,
select: "fields",
"fields.site.fields.siteName[match]": id
};
I've set up "vehicle" as a model which uses a "site" reference with names, addresses and so forth. It seems to be possible to use [exist] on the first level, like
"fields.site[exists]": true
which works, but is unsatisfactory for what I need.
What I need are any Vehicles that belong to a named Site. Obviously, I've made sure to add the relevant content, and I can indeed see the data when omitting the "fields.site.fields..." line. For security purposes, I would very much not have vehicles for other sites showing up in the response.
Am I missing something? Upping the "include" level does not do anything either.
👋🏻
I believed you didn't see one sentence in the docs.
Second is fields.brand.sys.contentType.sys.id=sFzTZbSuM8coEwygeUYes which you use to to filter on fields of entries from content type 2PqfXUJwE8qSYKuM0U6w8M.
So basically to make your query work you have also to define the content type of the entry your search query is matching against.
I quickly prototyped your case in Node.js.
const { createClient } = require('contentful');
const client = createClient({
space: '...',
accessToken: '...'
});
client.getEntries({
content_type: 'vehicle',
select: 'fields',
// this is the line you're missing
'fields.site.sys.contentType.sys.id': 'site',
'fields.site.fields.siteName': 'vw-site'
}).then(({items}) => {
console.log(items);
}).catch(e => console.log(e));
You can find a detailed example in the docs
Hope that helps :)

How to add a property to an object

I need to pass the exact data to the webAPI:
{
email: "useremail",
password: "userpassword",
grant_type: "password"
}
From the login form, I receive the following data:
{
email: "useremail",
password: "userpassword"
}
I need to add the grant_type: "password" to the object.
Here is my method
signIn(credentials) {
console.log(credentials);
this.authService.login(credentials)
.subscribe(result => {
if (result)
this.router.navigate(['/']);
else
this.invalidLogin = true;
});
}
The credentials is the data coming from the Login form.
If you have this:
let jsonObject = {
email: "useremail",
password: "userpassword",
}
I think you can simply do like so
jsonObject['grant_type'] = password;
Otherwise, simple and effective:
let extendedJsonObject = {
email: jsonObject.email,
password: jsonObject.password,
grant_type: 'password'
};
As #jonrsharpe said in the comments, you can also do so:
let extendedJsonObject = { grant_type: 'password', ...jsonObject }
According to #Kyrsberg you can also do
let extendedJsonObject = Object.assign({grant_type: 'password'}, jsonObject);
What you appear to want to do is to add a property to an object. This is one of the most basic operations in all of JavaScript. It is something that you would learn early on in any of the hundreds or thousands of tutorials, intros, beginner books, blog posts, and documentation pages that cover JavaScript.
I strongly suggest you go back and review whatever materials you were using to learn JavaScript. For instance, you could start with this friendly intro to property accessors.
This has nothing to do with TypeScript or Angular. TypeScript is a type layer on top of JS. Angular is an application framework. Your question is purely about JavaScript. It's a bit concerning that you thought this problem might have something to do with TypeScript or Angular. It would indicate you don't actually understand the relationship among the tools you are using, namely JavaScript and TypeScript and Angular. Understand clearly that you are working with the language called JavaScript. You must study it carefully and know it well before even starting to work with TypeScript or Angular.
You also seem deeply confused about the meaning of the term "JSON". JSON is exactly one thing: a text-based format for exchanging information. JavaScript objects are not JSON, although they resemble each other (hence the "J" of "JSON"), and can be converted back and forth ("parsing" and "stringifying"). Your problem has absolutely nothing to do with JSON. The objects you are working with, which include properties such as email, are not JSON. If you insist on calling them JSON--and there is no shortage of similarly misguided folks trying to work in JavaScript--you will merely confuse yourself and those around you. These objects are plain, old, ordinary, JavaScript objects, and that's what you should call them.

Swagger UI with digest authentication

I'm using Swagger to produce the documentation of my REST API. According to what is written around, the Swagger UI does not offer support for basic authentication (differently from the online editor). My problem is that one of my APIs is a POST that require digest (not even basic) authentication.
A possible solution I found around is to add a fixed user:pass authentication header in the request via javascript code. This should be easily done according to the Swagger UI documentation (see Custom Header Parameters). I report the incriminated code line:
swaggerUi.api.clientAuthorizations.add("key", new SwaggerClient.ApiKeyAuthorization("Authorization", "XXXX", "header"));
Unfortunately it doesn't work. The swaggerUi.api field results uninitialised (null) after I initialise the SwaggerUi object, and as a consequence swaggerUi.api.clientAuthorizationsis undefined. I tried initialising such fields in different way, failing every time. I tried also similar calls to the API I found in threads discussing this topic, but none of them has worked. Does anyone have an idea about that? The documentation is not particularly clear about that.
For completeness, I report the js snippet where I initialise the Swagger UI
var urlPush = "./doc_push.yaml";
window.swaggerUiPush = new SwaggerUi({
url: urlPush,
dom_id: "swagger-ui-container-push",
supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
onFailure: function(data) {
log("Unable to Load SwaggerUI");
},
docExpansion: "list",
jsonEditor: false,
defaultModelRendering: 'model',
showRequestHeaders: false,
});
Try using SwaggerClient.PasswordAuthorization instead of SwaggerClient.ApiKeyAuthorization -
var username = $('#input_username').val();
var password = $('#input_password').val();
var basicAuth = new SwaggerClient.PasswordAuthorization('basic', username, password);
window.swaggerUi.api.clientAuthorizations.add("basicAuth", basicAuth);

Reddit Api Error trying to get reddit self text via snoocore node.js

I'm tryng to get the self.text on a post and using this route:
reddit('/r/Denmark/comments/2jc5yk/how_to_live_in_denmark.json').listing({
context: 1,
limit: 10,
sort: 'hot',
})
.then(function(result) {
console.log(result);
});
I have also tried using .get(), without .json and without /how_to_live_in_denmark but still the same error.
When I input the route in my browser, I get the desired JSON.
The error i get:
Uncaught Error: Invalid path provided! This endpoint does not exist. Make sure that your call matches the routes that are defined in Reddit's API documentation
What am i doing wrong?
Update: 2015-02-09
Snoocore now accepts URLS's with embedded values and does not require placeholders if you do not wish to use them.
I'm the creator of this API wrapper. I'll have to monitor StackOverflow a little bit more to catch these quicker. Feel free to open new issues on GitHub as well when you get stuck on something for a quicker response!
It looks like you are trying to call this endpoint:
GET /r/[subreddit]/comments/article
Basically anything that is in brackets is optional in Snoocore, and anything in italics is an URL parameter that you will need to define placeholders for in the call (using $parameter). More information on this can be read in the documentation (feel free to ask questions or improve upon the documentation if it isn't clear!)
So in your case, you will want to do this:
reddit('/r/$subreddit/comments/$article').get({
$subreddit: 'Denmark',
$article: '2jc5yk',
context: 1,
limit: 10,
sort: 'hot'
}).done(function(result) {
console.log(result);
});
Note that instead of defining the url parameters in the call, the are now referenced by $subreddit and $article respectivly.
Note that comments are not a listing, and therefore can't use the listings interface as you tried to do in your question.

Categories

Resources